क्लाइंट-साइड जावास्क्रिप्ट निर्भरता कैसे प्रबंधित करें? [बन्द है]

95

बन्द है। यह प्रश्न स्टैक ओवरफ्लो दिशानिर्देशों को पूरा नहीं करता है । यह वर्तमान में उत्तर स्वीकार नहीं कर रहा है।

इस प्रश्न को सुधारना चाहते हैं? सवाल को अपडेट करें ताकि यह स्टैक ओवरफ्लो के लिए विषय पर हो ।

3 साल पहले बंद हुआ ।

यद्यपि सर्वर साइड पर निर्भरता का प्रबंधन करने के लिए महान समाधान हैं, मुझे कोई भी ऐसा नहीं मिला जो मेरी सभी जरूरतों को एक सुसंगत ग्राहक पक्ष जावास्क्रिप्ट निर्भरता प्रबंधन वर्कफ़्लो को संतुष्ट करता हो। मैं इन 5 आवश्यकताओं को पूरा करना चाहता हूं:

एक प्रारूप NPM के समान में मेरे मुवक्किल की ओर निर्भरता प्रबंधित package.json या बोवर कीbower.json
dependency.jsonकम ज्ञात पुस्तकालयों के लिए मेरी फ़ाइल में रेपो या वास्तविक js फ़ाइलों (या तो वेब या स्थानीय रूप से) पर इंगित करने के लिए इसका लचीलापन होना चाहिए (npm आपको git repos को इंगित करने देता है)
इसे सभी लाइब्रेरियों को एक फाइल की तरह मिनिमाइज और नेमस्पेस करना चाहिए - एंडर की तरह यह एक ही जेएस फाइल है जिसे मुझे <script>क्लाइंट टैग में अपने टैग में डालना होगा
यह BoxJS 4 (अब मृत) जैसे CoffeeScript के लिए बॉक्स समर्थन से बाहर होना चाहिए
ब्राउज़र में, मैं या तो में सक्षम होना चाहिए की आवश्यकता होती है शैली:
```
var $ = require('jquery');
var _ = require('underscore');
```
या बेहतर अभी तक, हेडज स्टाइल करें:
```
head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) {
  // executed when all libraries are loaded
});
```

यदि ऐसा कोई एकल उपकरण मौजूद नहीं है, तो उपकरण का सबसे अच्छा संयोजन क्या है अर्थात एक उपकरण-श्रृंखला जिसे मैं कुछ चीज़ों जैसे कि वोलो (या ग्रंट ) का उपयोग करके संयोजित कर सकता हूं ?

मैंने पहले ही यहां से जुड़े सभी साधनों पर शोध कर लिया है और वे मेरी आवश्यकताओं में से केवल 3 को ही व्यक्तिगत रूप से पूरा करते हैं। इसलिए, कृपया इन टूल के बारे में फिर से पोस्ट न करें। मैं केवल एक उत्तर को स्वीकार करूंगा जो एक एकल उपकरण प्रदान करता है जो मेरी सभी 5 आवश्यकताओं को पूरा करता है या यदि कोई ठोस वर्कफ़्लो / स्क्रिप्ट / कई ऐसे उपकरणों के एक टूलकिन के कार्यशील उदाहरण को पोस्ट करता है जो मेरी सभी आवश्यकताओं को पूरा करता है। धन्यवाद।

— pathikrit
स्रोत

6

कुछ जरूरी है ।

— चन्द्रशेखर वालजापेट

1

एक अधिक "नोड शैली" समाधान के लिए बंदरगाहों नोड के कि requireब्राउज़र के लिए वाक्य रचना पर विचार browserify

— smithclay

1

क्या आप अधिक स्पष्ट हो सकते हैं? मेरे प्रश्न में 5 बुलेट-पॉइंट्स में से, मुझे लगता है कि केवल एक या दो बिंदुओं को संतुष्ट करने के लिए आवश्यकता / ब्राउज़र करना चाहिए। मैं एक टूल (या टूल-चेन) की तलाश कर रहा हूँ जो मुझे मेरी सभी पाँच आवश्यकताओं को पूरा करने देता है

— pathikrit

3

मैं अभी तक इसे करने की कोशिश नहीं की थी, लेकिन शायद yeoman.io एक अच्छे उम्मीदवार भी है

— Guillaume86

1

मैंने सिर्फ वन के बारे में सुना है - यह कुछ हद तक संबंधित लगता है: github.com/azer/onejs

— dsummersl

45

आवश्यकता है ।js आप की जरूरत है सब कुछ करता है।

इस सवाल का मेरा जवाब आपकी मदद कर सकता है

उदाहरण:

ग्राहक एप्लिकेशन परियोजना पदानुक्रम:

sampleapp
    |___ main.js
    |___ cs.js
    |___ require.js

main.js वह जगह है जहाँ आप अपने क्लाइंट एप्लिकेशन को इनिशियलाइज़ करते हैं और आवश्यकता को कॉन्फ़िगर करते हैं। js :

require.config({
    baseUrl: "/sampleapp",
    paths: {
        jquery: "libs/jquery", // Local
        underscore: "http://underscorejs.org/underscore-min.js", // Remote
        backbone: "https://github.com/documentcloud/backbone/blob/master/backbone-min.js" // Remote on github
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"] // Backbone depends on jquery and underscore
        }
    }
});

require(["cs!someCoffeescriptFile", "jquery", "backbone", "underscore"], function (SomeCoffeescriptFile, $, Backbone, _) {
    // Dependencies are loaded...
    // Execute code
});

निर्भरताएँ "सीएस!" द्वारा पूर्वनिर्धारित होने पर सीएस प्लगइन का उपयोग करेंगी । सीएस प्लगइन कॉफ़ीस्क्रिप्ट फ़ाइल संकलित करता है।

जब आप प्रोडक्ट्स में जाते हैं, तो आप r.js के साथ अपने पूरे प्रोजेक्ट को प्री-कंपाइल कर सकते हैं ।

node ./node_modules/requirejs/bin/r.js -o buildclientconfig.js

यहां आपकी आवश्यकताएं हैं:

Npm के package.json या bower's Components.json के समान प्रारूप में मेरे क्लाइंट साइड निर्भरता को प्रबंधित करें। अलग लेकिन अच्छा है!
मेरे पास मेरी निर्भरता में वेब रेपो या वास्तविक js फ़ाइलों (या तो वेब पर या स्थानीय रूप से) को इंगित करने के लिए लचीलापन होना चाहिए। कम ज्ञात पुस्तकालयों के लिए फ़ाइल (npm) चलो आप repit को इंगित करते हैं। हाँ
इसे सभी पुस्तकालयों को एंडर जैसे एक ही फाइल में छोटा और नामांकित करना चाहिए - यह एकमात्र js फाइल है जिसे मुझे क्लाइंट स्क्रिप्ट में अपने स्क्रिप्ट-टैग में डालना होगा। R.js. के साथ हाँ
यह बॉक्स जैसे कॉफ़ीस्क्रिप्ट के लिए बॉक्स समर्थन से बाहर होना चाहिए। हाँ
ब्राउज़र में मैं या तो शैली या हेडज की आवश्यकता का उपयोग कर सकता हूं। हाँ

— जीन-फिलिप लेक्लर्क
स्रोत

यदि मैं उपयोग करता हूं r.js, तो क्या मैं सभी पुस्तकालयों के गैर-minified संस्करणों में बस खींच सकता हूं, या मुझे minified और गैर-स्तरीय पुस्तकालयों के बीच कैसे निर्णय लेना चाहिए?

— डोमी

एकमात्र समस्या यह है कि जेजेएस बकवास की आवश्यकता है जिसे आपको मिनिफ़ाइंड कोड के साथ ले जाना होगा।

— बेन सिंक्लेयर

1

@ और जरूरी नहीं! आप बादाम का उपयोग कर सकते हैं जो बहुत छोटा है!

— एडम बी

24

http://requirejs.org/ वह है जिसे आप ढूंढ रहे हैं जो मुझे विश्वास है

— चन्द्रशेखर वालजापेट
स्रोत

इसके लिए धन्यवाद। पता नहीं था कि यह नोडज के बाहर मौजूद है

— गॉटज

1

धन्यवाद! यदि आपको लगता है कि इसका उद्देश्य हल हो गया है, तो कृपया मेरे उत्तर को सही मानें!

— चन्द्रशेखर वालजापेट

3

मैं वह नहीं हूं, जिसने यह प्रश्न पूछा है xD

— GottZ

अरे! माफ़ करना!

— नॉट

3

मैं उलझन में हूं। इंटरनेट से एक मनमानी जावास्क्रिप्ट फ़ाइल में वास्तव में कैसे पुर्जे की आवश्यकता हो सकती है (मैं इसके रेपो में लोगों के बारे में बात नहीं कर रहा हूं जैसे कि jquery लेकिन कम प्रसिद्ध वाले)? क्या यह एक package.json फ़ाइल पढ़ सकता है? और यह CoffeeScript के साथ काम नहीं करता है ... क्या मुझे कुछ याद आ रहा है ??

— पथिक अमृत

15

@ Guillaume86 के रूप में मुझे लगता है कि हेम आपको सबसे करीब मिलेगा जहां आप होना चाहते हैं।

हेम निर्भरता में एनपीएम और हेम के संयोजन का उपयोग करके प्रबंधित किया जाता है। स्पष्ट रूप से अपनी सभी परियोजनाओं को बाहरी निर्भरता स्थापित करने के लिए npm का उपयोग करें। हेम का उपयोग यह निर्दिष्ट करने के लिए करें कि आपके क्लाइंट साइड ऑपरेशन के लिए कौन सी निर्भरताएं (बाहरी और स्थानीय दोनों) एक साथ सिले होनी चाहिए।

मैंने इसका एक कंकाल प्रोजेक्ट बनाया ताकि आप देख सकें कि यह कैसे काम करेगा - आप इसे https://github.com/dsummersl/clientsidehem पर देख सकते हैं

निर्भरता जोड़ना

एक विशिष्ट निर्भरता की खोज करने के लिए npm का उपयोग करें और फिर पैकेज.json फ़ाइल को संशोधित करें ताकि यह सुनिश्चित हो सके कि भविष्य में निर्भरता को ट्रैक किया गया है। फिर slug.json में अपने आवेदन के लिए निर्भरता निर्दिष्ट करें।

उदाहरण के लिए, मान लीजिए कि आप कॉफी-स्क्रिप्ट निर्भरता जोड़ना चाहते थे। निर्भरता स्थापित करने और अपने पैकेज में सहेजने के लिए बस npm का उपयोग करें। json फ़ाइल:

1. npm --save install coffee-script
2. Manually edit the slug.json file. Add "coffee-script" to "dependencies".

मान लीजिए कि आप अपने स्वयं के मॉड्यूल 'ब्लूमफ़िल्टर' को शामिल करना चाहते थे और यह एनपीएम रजिस्ट्री में नहीं था। आप इसे अपनी परियोजना में निम्नलिखित तरीके से जोड़ सकते हैं:

1. npm --save install https://github.com/dsummersl/bloomfilters/tarball/master
2. Manually edit the slug.json file. Add "bloomfilters" to "dependencies".

स्थानीय मॉड्यूल

यदि आप अपनी खुद की कॉफी या जावास्क्रिप्ट को शामिल करना चाहते हैं, तो आप उन फ़ाइलों को ऐप / फ़ोल्डर में जोड़कर ऐसा कर सकते हैं। ध्यान दें कि 'आवश्यकता' पद्धति के माध्यम से अपनी स्क्रिप्ट को उजागर करने के लिए आपको इसे कॉमनज मॉड्यूल बनाना होगा। यह बहुत सरल है - हेम डॉक्स देखें ।

स्थानीय फ़ाइलें

यदि आप गैर-कॉमनजस गैर 'आवश्यकता' कोड को शामिल करना चाहते हैं, तो आप स्लग.जॉसन में 'लिबास' सूची के माध्यम से अपने कस्टम जावास्क्रिप्ट या कॉफिसस्क्रिप्ट को संदर्भित करके भी सिलाई कर सकते हैं।

सीएसएस

यदि आप चाहें तो हेम आपके सीएसएस को भी एक साथ जोड़ देगा। हेम डॉक्स देखें ।

इमारत

एक बार जब आप अपनी निर्भरता सूचीबद्ध कर लेते हैं, तो आप उन सभी को एक साथ सिलाई करने के लिए हेम का उपयोग कर सकते हैं।

# make sure all dependencies are present:
npm install .
# make public/application.js
hem build
# see your minified js in public/application.js

हेम स्पाइनज प्रोजेक्ट के लिए था - लेकिन आपको इसके लिए उपयोग नहीं करना है। अपनी इच्छा के अनुसार रीढ़ का उल्लेख करने वाले किसी भी डॉक्स को अनदेखा करें ...

— dsummersl
स्रोत

1

विवरण में जाने के लिए प्रयास करने के लिए +1;)

— Guillaume86

11

खैर, मुझे आश्चर्य है कि किसी ने अभी तक Browserify का उल्लेख नहीं किया है।

package.json प्रारूप का समर्थन करता है
नीचे npm का उपयोग करता है जो पैकेज स्रोत के रूप में एक गीथूब (या किसी भी गिट) रेपो का उपयोग कर सकता है
सभी निर्भरता को एकल फ़ाइल में निर्दिष्ट और संक्षिप्त करता है।
यदि आप इसे अपनी निर्भरता में शामिल करते हैं तो कॉफ़ीस्क्रिप्ट का समर्थन करता है
सभी तरह की शैली की आवश्यकता है।
स्रोत के नक्शे का समर्थन करता है

— Floby
स्रोत

आप ब्राउज़र के साथ किसी भी गितूब रेपो (या बोवर पैकेज) का उपयोग कर सकते हैं? क्या ऐसा कुछ चाहिए napaया नहीं? npmjs.org/package/napa

— कॉनर लीच

9

मुझे पूरा यकीन है कि हेम आपकी आवश्यकताओं को पूरा करता है (मैं अतिरिक्त संकलक - जेड और स्टाइलस के साथ एक व्यक्ति के कांटे का उपयोग करता हूं - यह आपकी आवश्यकताओं को अनुकूलित करना आसान है)। यह अवसादों के प्रबंधन के लिए npm का उपयोग करता है।

— Guillaume86
स्रोत

इस विशेष सवाल के पढ़ने से मुझे लगता है कि यह 1,3,5 काफी अच्छी तरह से बॉक्स से बाहर है। # 2 के लिए आप अपने स्वयं के स्थानीय जेएस पैकेज को नोड_मॉड्यूल्स में डाल सकते हैं (यह स्थानीय एनपीएम का उपयोग करता है), और आप गिट पर केवल निर्भरता के लिए गिट सबमॉड्यूल का उपयोग कर सकते हैं। # 4 के लिए मुझे लगता है कि आप हेम को चलाने से पहले खुद को जेएस करने के लिए कॉफी संकलन करने के लिए फंस गए हैं (जो आसान है)।

— dsummersl

टिप्पणी के लिए धन्यवाद, लेकिन हेम समस्याओं जो एक coffeescript उन्मुख ढांचा तो यह की एक बुनियादी आवश्यकता थी :), यह शुरू में Spine.js लिए बनाया गया था के बिना मेरे coffeescript संकलित

— Guillaume86

मैं समझता हूं कि यह एप्स की तरह रीढ़ की हड्डी के लिए होगा (यानी ऐप में कॉफी डालना / ...) लेकिन कॉफ़ीसेस्क्रिप्ट वाले बाहरी मॉड्यूल के बारे में क्या? मुझे लगता है कि राइट क्या पूछ रहा है, लेकिन मैं पूरी तरह से गलत हो सकता हूं ...

— dsummersl

1

ठीक है मैं नहीं जानता कि क्या यह बाहरी मॉड्यूल के लिए कॉफ़ीस्क्रिप्ट संकलित करता है, लेकिन मुझे नहीं लगता कि यह उपयोगी है, बाहरी मॉड्यूल आमतौर पर संकलित JS :)

— Guillaume86

हां, मैं कंसर्न हूं। यह एक केक बनाने / बनाने के दायरे में आता है ...

— dsummersl

5

आप येओमान पर एक नज़र डालना चाहते हैं , जो आपकी आवश्यकताओं की मदद करने के लिए कई तकनीकों का उपयोग करता है।

हमारे वर्कफ़्लो में वेब ऐप बनाते समय आपकी उत्पादकता और संतुष्टि में सुधार के लिए तीन टूल शामिल होते हैं: यो (मचान टूल), ग्रंट (बिल्ड टूल) और बोवर (पैकेज मैनेजमेंट के लिए)।

CoffeeScript, कम्पास और अधिक के लिए बिल्ड-इन समर्थन। R.js ( आवश्यकताएँ ) के साथ काम करता है , unittesting आदि।

अपनी आवश्यकताओं के अनुसार:

बोवर का उपयोग निर्भरता प्रबंधन के लिए किया जाता है
स्थानीय फ़ाइलों के साथ काम कर सकता है, git: //, http: // और बहुत कुछ
निर्माण और समर्थन के लिए समर्थन (यहां तक कि आपकी छवियों के लिए)
अंतर्निहित कॉफ़ीस्क्रिप्ट और कम्पास को स्वचालित रूप से संकलित करने के लिए समर्थन (LiveReload के साथ)
जैसा कि बिल्ड प्रक्रिया में कहा गया है: यदि आप एएमडी का उपयोग कर रहे हैं, तो मैं उन मॉड्यूल को r.js के माध्यम से पारित कर दूंगा ताकि आपके पास न हो।

सभी सुविधाएं:

बिजली की तेजी से मचान - आसानी से अनुकूलन टेम्पलेट्स (जैसे HTML5 बॉयलरप्लेट, ट्विटर बूटस्ट्रैप), आवश्यकताएँ और अधिक के साथ नई परियोजनाओं को मचान।

महान निर्माण की प्रक्रिया - न केवल आपको लघुकरण और संगति मिलती है; मैं आपकी सभी छवि फ़ाइलों को भी अनुकूलित करता हूं, एचटीएमएल, आपकी कॉफीस्क्रिप्ट और कम्पास फाइलों को संकलित करता हूं, यदि आप एएमडी का उपयोग कर रहे हैं, तो मैं उन मॉड्यूल को r.js के माध्यम से पारित कर दूंगा ताकि आपको नहीं करना पड़े।

स्वचालित रूप से कॉफ़ीस्क्रिप्ट और कम्पास का संकलन करें - हमारी LiveReload घड़ी प्रक्रिया स्वचालित रूप से स्रोत फ़ाइलों को संकलित करती है और जब भी कोई बदलाव नहीं होता है, तो आपके ब्राउज़र को ताज़ा करता है।

स्वचालित रूप से अपनी लिपियों को लिंट करें - आपकी सभी लिपियाँ स्वचालित रूप से JSHint के खिलाफ चल रही हैं ताकि यह सुनिश्चित किया जा सके कि वे भाषा की सर्वोत्तम प्रथाओं का पालन कर रहे हैं।

अंतर्निहित पूर्वावलोकन सर्वर - अपने स्वयं के HTTP सर्वर को आग लगाने के लिए और अधिक नहीं। मेरे बिल्ट-इन को सिर्फ एक कमांड से दागा जा सकता है।

विस्मयकारी छवि अनुकूलन - मैं OptiPNG और JPEGTran का उपयोग करके आपकी सभी छवियों का अनुकूलन करता हूं ताकि आपके उपयोगकर्ता आपके ऐप का उपयोग करके कम समय में संपत्ति और अधिक समय डाउनलोड कर सकें।

किलर पैकेज प्रबंधन - एक निर्भरता की आवश्यकता है? यह सिर्फ एक कीस्ट्रोक है। मैं आपको आसानी से कमांड-लाइन के माध्यम से नए पैकेजों की खोज करने की अनुमति देता हूं (जैसे `bower खोज jquery), उन्हें स्थापित करें और उन्हें अपने ब्राउज़र को खोलने की आवश्यकता के बिना अपडेट रखें।

PhantomJS यूनिट परीक्षण - आसानी से PhantomJS के माध्यम से बिना शीर्षक वाले WebKit में अपनी इकाई परीक्षण चलाएं। जब आप एक नया एप्लिकेशन बनाते हैं, तो मैं आपके ऐप के लिए कुछ परीक्षण मचान भी शामिल करता हूं।

— MarcoK
स्रोत

कृपया -1 के लिए एक टिप्पणी छोड़ दें?

— मार्को

4

आपकी आवश्यकता के लिए बोवर आपकी आवश्यकताओं (1) और (2) के लिए उपयुक्त हो सकता है। रीडमी से:

Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.

पैकेज स्थापित करने के लिए:

bower install jquery
bower install git://github.com/maccman/package-jquery.git
bower install http://code.jquery.com/jquery-1.7.2.js
bower install ./repos/jquery

— user18428
स्रोत

मैंने अपने ओपी (बोवर सहित) से जुड़े सभी लोगों पर शोध किया है और उनमें से कोई भी मेरी 5 आवश्यकताओं में से 3 से अधिक को संतुष्ट करने के लिए नहीं होता है। मैं एक एकल टूल (या टूल के संयोजन) की तलाश कर रहा हूं जो मेरे सभी 5 मुद्दों को संबोधित करेगा।

— पथिक

नहीं पता है कि अगर एक मूल्य के लायक है, मैंने कहा कि बोवर + आवश्यकताएं आपकी जरूरत के अनुरूप हो सकती हैं। आपने कहा कि आप 'औजारों के सर्वोत्तम संयोजन' के लिए भी खुले थे। हालांकि आपकी खोज का सौभाग्य है

— user18428

इसमें क्या गलत है: (1) बोवर (2) भी बोवर (3) रिक्जेस्ट बिल्ड (4) आपके पास पहले से ही नोड संस्थापित है? (5) requirejs

— user18428

2

को देखो जाम पैकेज प्रबंधक । इसके मुखपृष्ठ से विवरण निम्नलिखित है

फ्रंट-एंड डेवलपर्स के लिए जो रखरखाव योग्य संपत्ति की लालसा रखते हैं, जैम जावास्क्रिप्ट के लिए एक पैकेज मैनेजर है। अन्य रिपॉजिटरी के विपरीत, हम पहले ब्राउज़र डालते हैं।

यह npm के समान लगता है कि यह कैसे काम करता है।

नीचे की तरह पैकेज स्थापित करें

jam install backbone

निष्पादित करके पैकेजों को अद्यतित रखना

jam upgrade
jam upgrade {package}

उत्पादन के लिए पैकेज का अनुकूलन करें

jam compile compiled.min.js

जाम निर्भरता package.jsonफ़ाइल में जोड़ा जा सकता है ।

पूर्ण प्रलेखन के लिए जाम प्रलेखन पढ़ें

— हिमांशु
स्रोत

2

मुझे अभी-अभी इंजेक्शन आए हैं

परियोजना स्थल से कुछ विशेषताएं :

Inject (Apache Software लाइसेंस 2.0) एक लाइब्रेरी एग्नॉस्टिक तरीके से अपनी निर्भरता को प्रबंधित करने का एक क्रांतिकारी तरीका है। इसकी कुछ प्रमुख विशेषताओं में शामिल हैं:

ब्राउज़र में कॉमनजेएस अनुपालन (निर्यात। *)

पूरा कॉमनज सपोर्ट मैट्रिक्स देखें

फ़ाइलों की क्रॉस डोमेन पुनर्प्राप्ति (easyXDM के माध्यम से)

लोकलस्टोरेज (एक बार एक मॉड्यूल लोड करें)

— Veverke
स्रोत

मुझे इंजेक्शन पसंद है। यह आवश्यकताएँ की तुलना में बहुत साफ है, और लगभग नोड के साथ लिखना पसंद है।

— मर्दोक

1

कुछ विकल्प हैं:

http://browserify.org/ जो आपको मॉड्यूल आयात करने की अनुमति देता है
आवश्यकताएँJJ एक ही समस्या को संबोधित करते हैं
जो सक्रिय विकास में लगता है वह JoinJS है

घटक भी रुचि का हो सकता है, यह प्रति निर्भरता का प्रबंधन नहीं करता है, लेकिन आपको अन्यथा बड़े पुस्तकालयों के कटा हुआ संस्करणों का उपयोग करने की अनुमति देता है।

— JoelKuiper
स्रोत

1

मैं npm के साथ हेम का उपयोग करता हूं, और मैं कुछ अतिरिक्त लाभ जोड़ना चाहता था जो मुझे लगता है कि अब तक कवर नहीं किए गए थे।

हेम के पास एक स्व-निहित वेब सर्वर (स्ट्रैटा) है ताकि आप अपने कोड को फिर से शुरू करने की आवश्यकता के बिना भी विकसित कर सकें। hem buildजब तक मैं एक ऐप प्रकाशित नहीं कर रहा हूं, मैं कभी भी उपयोग नहीं करता हूं।
आपको हेम का उपयोग करने के लिए Spine.js का उपयोग करने की आवश्यकता नहीं है, यदि आप slug.json को सही तरीके से सेट करते हैं, तो आप इसे मनमाने ढंग से कॉफ़िसस्क्रिप्ट पैकेज संकलित करने के लिए उपयोग कर सकते हैं। यहाँ मेरे पैकेज में से एक है जो कि केकफाइल के साथ ऑटो-संकलित है: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
उपरोक्त बात करते हुए, हेम आपको एनपीएम लिंक के साथ अपने स्थानीय सिस्टम पर अन्य निर्भरता को जोड़ने की अनुमति देता है और जब आप स्ट्रेट सर्वर का उपयोग कर रहे होते हैं, तब भी उन्हें मूल रूप से जोड़ती है। वास्तव में, आपको cakeउपरोक्त विधि का उपयोग करने की भी आवश्यकता नहीं है, आप बस सीधे आश्रित परियोजनाओं से कॉफ़ीस्क्रिप्ट से लिंक कर सकते हैं।
हेम ecoसीएसएस के लिए विचारों और स्टाइलस के लिए (एम्बेडेड कॉफ़ीस्क्रिप्ट) का समर्थन करता है , और अपने कॉफ़ी के साथ-साथ एक जेएस और एक सीएसएस फ़ाइल में वह सब संकलित करता है।

यहाँ एक स्पाइन, हेम, कॉफ़ीस्क्रिप्ट ऐप के साथ सेट अप करने के लिए एक बुनियादी सूची है। रीढ़ के अंगों को नजरअंदाज करने के लिए स्वतंत्र महसूस करें। वास्तव में, कभी-कभी मैं spine appएक गैर-स्पाइन एप्लिकेशन के लिए एक निर्देशिका संरचना स्थापित करने के लिए उपयोग करता हूं , फिर slug.jsonएक अलग संकलन संरचना में बदलने के लिए संपादित करता हूं ।

एनपीएम स्थापित करें: curl http://npmjs.org/install.sh | shएक * निक्स प्रणाली पर। मुझे लगता है कि यह कमांड लाइन से उपलब्ध है।
विश्व स्तर पर हेम स्थापित करें ( npm install -g hem)। विकास देर से हुआ है, इसलिए आप इसे सीधे जीथब ( https://github.com/spine/hem ), एक शाखा और चेक npm install -g .फ़ोल्डर में प्राप्त करना चाहते हैं ।
npm install -g spine.app एक वैश्विक कमांड के रूप में रीढ़ को उपलब्ध कराएगा
spine app folderशुरू करने के लिए सही निर्देशिका संरचना और कंकाल फ़ाइलों का एक गुच्छा पैदा करने appमें folder, एक स्पाइन परियोजना बनाई जाएगी ।
cddependencies.jsonआप की जरूरत पुस्तकालयों के लिए फ़ोल्डर और संपादित करने के लिए। उन्हें slug.jsonइतना जोड़ें कि हेम जानता है कि उन्हें कहां खोजना है।
वैकल्पिक: npm linkआपके विकास में कोई भी स्थानीय पैकेज node_modules, और आप उन्हें slug.jsonहेम के लिए जोड़ सकते हैं (या तो index.jsसीधे शामिल करने के लिए या index.coffeeयदि आप चाहते हैं कि हेम इसे संकलित करें।)
npm install . आपके द्वारा अभी-अभी दर्ज की गई सभी निर्भरता को डाउनलोड करने के लिए।
यदि आप डिफ़ॉल्ट रीढ़ विन्यास पर एक नज़र डालते हैं, तो एक app/lib/setup.coffeeजगह है जहाँ आप requireअपने निर्भरता से सभी पुस्तकालयों की आवश्यकता है। उदाहरण:
```
# Spine.app had these as dependencies by default
require('json2ify')
require('es5-shimify')
require('jqueryify')

require('spine')
require('spine/lib/local')
require('spine/lib/ajax')
require('spine/lib/manager')
require('spine/lib/route')

# d3 was installed via dependencies.json
require 'd3/d3.v2'
```
में index.coffee, आप बस require lib/setupऔर अपने ऐप के लिए मुख्य नियंत्रक लोड करें। इसके अलावा, आपको requireउन अन्य नियंत्रकों में किसी अन्य वर्ग की आवश्यकता है । आप नियंत्रकों और मॉडलों के लिए टेम्पलेट्स का उपयोग spine controller somethingया spine model somethingउत्पन्न कर सकते हैं । नोड का उपयोग करते हुए, विशिष्ट स्पाइन नियंत्रक निम्न की तरह दिखता है require:
```
Spine = require('spine')
# Require other controllers
Payment = require('controllers/payment')

class Header extends Spine.Controller
  constructor: ->
    # initialize the class

  active: ->
    super
    @render()

  render: ->
    # Pull down some eco files
    @html require('views/header')   

# Makes this visible to other controllers    
module.exports = Header
```
उत्पन्न डिफ़ॉल्ट index.htmlआमतौर पर आपके ऐप को लोड करने के लिए ठीक रहेगा, लेकिन आवश्यक रूप से संशोधित करें। आपकी आवश्यकताओं के अनुसार, यह केवल एक jsऔर एक cssफ़ाइल में खींचती है , जिसे आपको संशोधित करने की आवश्यकता नहीं है।
cssफ़ोल्डर में अपनी स्टाइलस फ़ाइलों को आवश्यकतानुसार संपादित करें । यह सीएसएस की तुलना में बहुत अधिक लचीला है :)
से folder, hem serverहेम सर्वर शुरू करने के लिए, और localhost:9294अपने ऐप को देखने के लिए नेविगेट करें। (यदि आपने विश्व स्तर पर हेम स्थापित किया है।) इसके कुछ छिपे हुए तर्क हैं, उदाहरण के लिए --host 0.0.0.0सभी बंदरगाहों पर सुनता है।
उचित MVC तकनीकों का उपयोग करके अपने बाकी ऐप का निर्माण करें, और दृश्यों के लिए CSS और Eco के लिए स्टाइलस का उपयोग करें। या स्पाइन का उपयोग बिल्कुल भी न करें, और हेम अभी भी कॉफ़ीस्क्रिप्ट और एनपीएम के साथ बहुत अच्छा काम करेगा। दोनों मॉडल का उपयोग करके परियोजनाओं के कई उदाहरण हैं।

एक और बात: आम तौर पर, hem serverअपने कोड को अपडेट करने और फ़ाइलों को सहेजने के बाद स्वचालित रूप से अपडेट हो जाएगा, जो इसे डिबग करने के लिए एक चिंच बनाता है। चल रहा है hem buildको दो फ़ाइलों में अपने अनुप्रयोग संकलन होगा application.js, जो न्यूनतम किया गया और है application.css। यदि आप इसके hem serverबाद चलते हैं , तो यह उन फ़ाइलों का उपयोग करेगा और अब अपने आप अपडेट नहीं होगा। इसलिए hem buildजब तक आपको वास्तव में तैनाती के लिए अपने ऐप का एक छोटा संस्करण नहीं चाहिए।

अतिरिक्त संदर्भ: Spine.js और हेम शुरू हो रही है

— एंड्रयू माओ
स्रोत

1

यहां एक समाधान है जो बहुत अलग दृष्टिकोण लेता है: सभी मॉड्यूल को JSON ऑब्जेक्ट में पैकेज करें और अतिरिक्त अनुरोधों के बिना फ़ाइल सामग्री को पढ़ने और निष्पादित करके मॉड्यूल की आवश्यकता होती है।

शुद्ध क्लाइंटसाइड डेमो कार्यान्वयन: http://strd6.github.io/editor/

https://github.com/STRd6/require/blob/master/main.coffee.md

STRd6 / आवश्यकता एक JSON पैकेज रनटाइम पर उपलब्ध होने पर निर्भर करता है। requireसमारोह है कि पैकेज के लिए उत्पन्न होता है। पैकेज में उन सभी फाइलों को समाहित किया गया है जिनकी आपके ऐप को आवश्यकता हो सकती है। कोई और http अनुरोध नहीं किए गए हैं क्योंकि पैकेज सभी निर्भरता को बंडल करता है। यह ग्राहक के लिए आवश्यक Node.js शैली के लिए मिल सकता है।

पैकेज की संरचना इस प्रकार है:

entryPoint: "main"
distribution:
  main: 
    content: "alert(\"It worked!\")"
  ...
dependencies:
  <name>: <a package>

नोड के विपरीत एक पैकेज नहीं जानता कि यह बाहरी नाम है। यह निर्भरता सहित pacakge पर निर्भर है, इसे नाम दें। यह पूर्ण एनकैप्सुलेशन प्रदान करता है।

यहाँ उस सभी सेटअप को देखते हुए एक फंक्शन है जो एक पैकेज के अंदर से फाइल लोड करता है:

loadModule = (pkg, path) ->
  unless (file = pkg.distribution[path])
    throw "Could not find file at #{path} in #{pkg.name}" 

  program = file.content
  dirname = path.split(fileSeparator)[0...-1].join(fileSeparator)

  module =
    path: dirname
    exports: {}

  context =
    require: generateRequireFn(pkg, module)        
    global: global
    module: module
    exports: module.exports
    PACKAGE: pkg
    __filename: path
    __dirname: dirname

  args = Object.keys(context)
  values = args.map (name) -> context[name]

  Function(args..., program).apply(module, values)

  return module

यह बाहरी संदर्भ कुछ चर प्रदान करता है जिनकी मॉड्यूल तक पहुंच है।

एक requireफ़ंक्शन मॉड्यूल के संपर्क में है, इसलिए उन्हें अन्य मॉड्यूल की आवश्यकता हो सकती है।

अतिरिक्त गुण जैसे वैश्विक वस्तु का संदर्भ और कुछ मेटाडेटा भी उजागर होते हैं।

अंत में हम मॉड्यूल और दिए गए संदर्भ के भीतर कार्यक्रम को निष्पादित करते हैं।

यह उत्तर उन लोगों के लिए सबसे अधिक उपयोगी होगा जो एक तुल्यकालिक नोड होना चाहते हैं। जे एस शैली को ब्राउज़र में कथन की आवश्यकता होती है और दूरस्थ स्क्रिप्ट लोडिंग समाधान में कोई दिलचस्पी नहीं होती है।

— डैनियल एक्स मूर
स्रोत

1

अगर आप बैकेंड पर नोड / एक्सप्रेस का उपयोग कर रहे हैं तो कार्टरो को देखें ।

— बहादुर दवे
स्रोत

0

मैं dojo टूलकिट की जाँच करने का सुझाव दूंगा जो आपकी अधिकांश आवश्यकताओं को पूरा करता है। एक मुझे यकीन नहीं है कि CoffeeScript है।

dojo एसिंक्रोनस मॉड्यूल परिभाषा (AMD) प्रारूप में लिखे गए मॉड्यूल के साथ काम करता है। इसमें पैकेज के साथ एक बिल्ड सिस्टम है और आप उन्हें एक या कई फाइलों (जिन्हें लेयर्स) में एग्रीगेट कर सकते हैं। जाहिरा तौर पर यह git प्रकार रिपॉजिटरी को स्वीकार करता है, निर्माण प्रणाली पर अधिक विवरण यहां:

http://dojotoolkit.org/documentation/tutorials/1.8/build/

रिकॉर्ड के लिए, v1.9 बीटा अगले महीने होने की उम्मीद है।

— क्रिस्टोफ़
स्रोत

0

एक और रूपरेखा जो हाल ही में जारी की गई मेरी सभी कसौटी को पूरा करती है: http://duojs.org/ (और सीएसएस जैसे अन्य संसाधनों को निर्भरता मानते हुए इलाज का समर्थन भी करती है)।

— pathikrit
स्रोत

0

एसिंक्रोनस लोडिंग के साथ निर्भरता इंजेक्शन + ब्राउजर एक और अच्छा विकल्प होगा, आवश्यकता की तुलना में

अतुल्यकालिक-दृश्यपटल-निर्भरता प्रबंधन-बिना-एएमडी

— fantasyni
स्रोत

1

यह थोड़ा विरल है। यहां उत्तर का अधिक समावेश करना और संदर्भ के लिए लिंक प्रदान करना बेहतर होगा ।

— नाथन तुग्गी

क्लाइंट-साइड जावास्क्रिप्ट निर्भरता कैसे प्रबंधित करें? [बन्द है]

निर्भरता जोड़ना

स्थानीय मॉड्यूल

स्थानीय फ़ाइलें

सीएसएस

इमारत

टिप्पणियाँ