बोवर इनिट - amd, es6, ग्लोबल्स और नोड के बीच अंतर


291

मैं अपना पहला Bower घटक बना रहा हूं। bower initस्क्रिप्ट चलाने के बाद मुझसे पूछता है 'यह पैकेज किस प्रकार के मॉड्यूल को उजागर करता है?' इन विकल्पों के साथ:

  • एएमडी
  • ES6
  • वैश्विक
  • नोड

इन विकल्पों में क्या अंतर है?

जवाबों:


121

यदि आप नहीं जानते हैं, तो यह काफी संभावना है कि ग्लोबल्स आपके लिए सही उत्तर है।

किसी भी तरह, आपको समझने की आवश्यकता है:

[अपडेट करें]

इस सुविधा को बहुत हाल ही में बोवर में पेश किया गया था और इसे अभी तक (AFAIK) में प्रलेखित नहीं किया गया है। यह अनिवार्य रूप से वर्णन करता है moduleType, जो बताता है कि कौन सी मॉड्यूल तकनीक पैकेज का उपभोग करने के लिए है (ऊपर देखें)।

अभी, इसमें moduleTypeसंपत्ति सेट करने के अलावा कोई प्रभाव नहीं हैbower.json पैकेज फ़ाइल ।

Https://github.com/bower/bower/pull/934 देखेंमूल पुल-अनुरोध के लिए ।

[अद्यतन # २]

टिप्पणियों का जवाब देने के लिए कुछ अतिरिक्त बिंदु:

  • अभी AFAIK की moduleTypeसंपत्ति पर कोई सत्यापन नहीं हुआ है - जिसका अर्थ है कि लोगों को तकनीकी रूप से वे जो भी मूल्य चाहते हैं, उसका उपयोग करने की अनुमति है, जिसमें शामिल हैंangularjs अगर वे ऐसा करने के लिए इच्छुक महसूस करते हैं
  • बोवर समिति अतिरिक्त के शामिल किए जाने की ओर उत्सुक नहीं हो रहा है non-interoperable/proprietary moduleTypes(लगता है संगीतकार, कोणीय, आदि) - जो आसानी से समझा जा सकता है, लेकिन एक बार फिर, कुछ भी नहीं सच का उपयोग करने से लोगों को रोकता है moduleTypeमूल्य वे चाहते हैं
  • पहले का अपवाद (कुछ) हाल ही में शामिल किया गया है yui moduleType, इसलिए, "अपवाद" बनाए जाने हैं, यह मानते हुए कि वे एक ठोस योजना का हिस्सा हैं

यदि मैं एक सूचीबद्ध सूचीबद्ध प्रबंधक के लिए एक पैकेज लेखक और इसे बोवर पर प्रकाशित करने के लिए क्या करूं?

मैं एक es6 मॉड्यूल लिखूंगा, और पैकेज प्रारूप को आउटपुट करने के लिए / पैच es6-transpiler का उपयोग कर सकता हूं जिसकी मुझे आवश्यकता है। तब मैं या तो / और:

  • एक विकल्प के रूप में मेरे पैकेज तकनीक को शामिल करने के लिए बोवर लोगों को याचिका दें (इस तथ्य के आधार पर यह लक्ष्य के रूप में es6-transpiler द्वारा समर्थित है)
  • मेरे पैकेज को इसके एस्क 6 मॉड्यूल संस्करण और इसके ट्रांसपेंड किए गए एक्सएक्सएक्स संस्करण दोनों सहित प्रकाशित करें, और es6ए के रूप में उपयोग करेंmoduleType

अस्वीकरण: मेरे पास वास्तविक जीवन का अनुभव नहीं है जो कि कोणीयरज मॉड्यूल संलेखन है।


4
ग्लोबल्स एंगुलरजेएस मॉड्यूल / पैकेज बनाने के लिए सही उत्तर होगा?

1
मैंने अपने पोस्ट को "असमर्थित पैकेज प्रबंधकों के साथ क्या करना है" प्रश्न के बारे में अतिरिक्त विचारों के साथ अपडेट किया - अभी तक फिर से, यह फ़ील्ड अनिवार्य नहीं है या अभी कुछ भी उपयोग नहीं किया जाता है - इसका मूल्य केवल जानकारीपूर्ण है। के रूप में angularjsअपने आप में, मैं उपयोग कर सकते हैं globals, हाँ, लेकिन मेरे अद्यतन पढ़ें। उम्मीद है की वो मदद करदे।
मंगतु देउत्ज

मैं नोड का उपयोग कर रहा हूँ। इसका मतलब है कि मैं नोड मॉड्यूल को उजागर कर रहा हूं? मैं कोणीय का उपयोग भी कर रहा हूं, जो कि मैं बोवर का उपयोग करके स्थापित कर रहा था जब मैंने देखा कि मेरे पास एक संदेश था जो मुझे बता रहा था कि मेरे पास "कोई भी नहीं है। बचाने के लिए bower.json फ़ाइल, एक बनाने के लिए bower init का उपयोग करें"। (या, यदि यह एक अलग प्रश्न है, तो मैं एक प्रश्न लिख सकता हूं। मुझे लगा कि शायद यह एक उपयुक्त टिप्पणी थी क्योंकि यह आपके उत्तर से संबंधित है। धन्यवाद!)
प्रैरीप्रोफ

27

प्रारंभिक

मैं bower initपहली बार भी उपयोग कर रहा हूं ।

कुछ जावास्क्रिप्ट कोड को संशोधित करने के लिए विकल्पों को विभिन्न तरीकों से संदर्भित करना चाहिए:

  • एएमडी: एएमडी का उपयोग करना define, आवश्यकता की तरह।
  • नोड: Node.js का उपयोग करना require
  • ग्लोबल्स: वैश्विक चर (जैसे window.JQuery) को उजागर करने के लिए जावास्क्रिप्ट मॉड्यूल पैटर्न का उपयोग करना।
  • es6: आगामी EcmaScript6 मॉड्यूल सुविधा का उपयोग करना।

मेरे मामले में मैंने एक Node.js मॉड्यूल dflow लिखा है, लेकिन मैं एक डिस्टर्ब / dflow.js फ़ाइल बनाने के लिए ब्राउज़रफाइबर का उपयोग कर रहा हूं जो एक वैश्विक निर्यात करता है dflow तो मैं चयनित: var वैश्विक

अन्य अपडेट

मैं जिस कमांड का उपयोग करता था उसे dflow ब्राउज करने के लिए a विंडो ग्लोबल ऑब्जेक्ट के था

browserify -s dflow -e index.js -o dist/dflow.js

मैंने इसे बदल दिया क्योंकि मैं इसका उपयोग करना पसंद करता हूं ब्राउज़र के अंदर भी आवश्यकता , इसलिए अब मैं इसका उपयोग कर रहा हूं

browserify -r ./index.js:dflow -o dist/dflow.js

और इसलिए मैंने bower.moduleType को बदल दिया अपनी bower.json फ़ाइल में नोड में ।

मुख्य प्रेरणा यह थी कि अगर मेरे मॉड्यूल नाम में डैश है, उदाहरण के लिए मेरा प्रोजेक्ट फ्लो-व्यू , मुझे करने की आवश्यकता है camelize में वैश्विक नाम flowView

इस नए दृष्टिकोण के दो अन्य लाभ हैं:

  1. नोड और ब्राउज़र इंटरफ़ेस समान हैं। का उपयोग करते हुएआवश्यकताक्लाइंट साइड और सर्वर साइड दोनों पर , मैं कोड उदाहरणों को केवल एक बार लिखता हूं, और उन्हें दोनों संदर्भों में आसानी से पुन: उपयोग करता हूं।
  2. मैं npm स्क्रिप्ट का उपयोग करता हूं और इसलिए, मैं इसका लाभ उठा सकता हूं ${npm_package_name} चर का और एक बार स्क्रिप्ट लिखने के लिए उपयोग कर सकता हूं।

यह एक और विषय है, लेकिन, यह वास्तव में लायक है कि आप विचार करें कि यह बाद के लाभ के लिए कैसे उपयोगी है: मुझे npm.scripts.browserifyमेरे पैकेज में उपयोग की जाने वाली विशेषता को साझा करने दें । json

"browserify": "browserify -r ./index.js:${npm_package_name} -o dist/${npm_package_name}.js"


1
आप वास्तव में पूर्व के लिए परिभाषित के अंदर की आवश्यकता का उपयोग कर सकते हैं: define(function(require, exports, module) { "use strict"; module.exports = { Collection: require("./collection"), View: require('./view') }; });
डोरन सेगल

7

बस संदर्भ के लिए, यह ठीक है कि क्या बोवर मॉड्यूल प्रकारों के बारे में निर्दिष्ट करता है:

mainजावास्क्रिप्ट फ़ाइल में परिभाषित मॉड्यूल का प्रकार । निम्नलिखित स्ट्रिंग्स में से एक या एक सरणी हो सकती है:

  • globals: जावास्क्रिप्ट मॉड्यूल है कि वैश्विक नाम स्थान के लिए कहते हैं, का उपयोग कर window.namespaceया this.namespaceवाक्य रचना
  • amd: जावास्क्रिप्ट मॉड्यूल एएमडी के साथ संगत है, जैसे कि आवश्यकताएँ , define()सिंटैक्स का उपयोग करना
  • node: सिंटैक्स का उपयोग करके नोड और कॉमनज के साथ जावास्क्रिप्ट मॉड्यूल संगतmodule.exports
  • es6: जावास्क्रिप्ट मॉड्यूल ECMAScript 6 मॉड्यूल के साथ संगत , उपयोग exportऔरimport वाक्यविन्यास
  • yui: सिंटैक्स का उपयोग करके जावास्क्रिप्ट मॉड्यूल YUI मॉड्यूल के साथ संगत हैYUI.add()

प्रासंगिक लिंक: https://github.com/bower/spec/blob/master/json.md#moduletype

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.