gruntjs - एनपीएम बनाम बोवर बनाम ब्राउजर बनाम गुलप बनाम ग्रंट बनाम वेबपैक




npm gulp (6)

वेबपैक और वेबपैक-देव-सर्वर क्या है? आधिकारिक दस्तावेज कहते हैं कि यह एक मॉड्यूल बंडलर है, लेकिन मेरे लिए यह सिर्फ एक कार्य धावक है। क्या फर्क पड़ता है?

webpack-dev-server एक लाइव रीलोडिंग वेब सर्वर है जो वेबपैक डेवलपर्स तत्काल प्रतिक्रिया प्राप्त करने के लिए उपयोग करते हैं कि वे क्या करते हैं। इसका उपयोग केवल विकास के दौरान किया जाना चाहिए।

यह प्रोजेक्ट nof5 यूनिट टेस्ट टूल से काफी प्रेरित है।

जैसा कि नाम से ही पता चलता है कि वेबपैक वेब के लिए एक सिंगल पैक युग बनाएगा। पैकेज को छोटा किया जाएगा, और एक फाइल में जोड़ा जाएगा (हम अभी भी HTTP 1.1 उम्र में रहते हैं)। वेबपैक संसाधनों (जावास्क्रिप्ट, सीएसएस, चित्र) के संयोजन और उन्हें इस तरह से इंजेक्ट करने का जादू करता है: <script src="assets/bundle.js"></script>

इसे मॉड्यूल बंडलर भी कहा जा सकता है क्योंकि यह मॉड्यूल निर्भरता को समझना चाहिए, और निर्भरता को कैसे पकड़ना है और उन्हें एक साथ बांधना है।

आप ब्राउजर का उपयोग कहां करेंगे? क्या हम नोड / ES6 आयात के साथ भी ऐसा नहीं कर सकते हैं?

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

ध्यान दें कि Webpack2 में ES6 मॉड्यूल लोडर सुविधाएँ System.import का उपयोग कर रही हैं, जो कि एक भी ब्राउज़र मूल रूप से समर्थन नहीं करता है।

आप npm + plugins पर gulp / grunt का उपयोग कब करेंगे?

आप गुल, ग्रंट, ब्रोकोली, ब्रंच और बोवर को forget सकते हैं। इसके बजाय सीधे npm कमांड लाइन लिपियों का उपयोग करें और आप यहाँ के लिए अतिरिक्त पैकेज को समाप्त कर सकते हैं:

var gulp        = require('gulp'),
  minifyCSS     = require('gulp-minify-css'),
  sass          = require('gulp-sass'),
  browserify    = require('gulp-browserify'),
  uglify        = require('gulp-uglify'),
  rename        = require('gulp-rename'),
  jshint        = require('gulp-jshint'),
  jshintStyle   = require('jshint-stylish'),
  replace       = require('gulp-replace'),
  notify        = require('gulp-notify'),

जब आप अपने प्रोजेक्ट के लिए कॉन्फिग फाइल बनाते हैं, तो आप संभवतः गुलप और ग्रंट कॉन्फिग फाइल जनरेटर का उपयोग कर सकते हैं। इस तरह आपको येओमान या इसी तरह के टूल को इंस्टॉल करने की आवश्यकता नहीं है।

मैं सबसे लोकप्रिय जावास्क्रिप्ट पैकेज प्रबंधकों, बंडलों और टास्क रनर के बारे में अपने ज्ञान को संक्षेप में प्रस्तुत करने की कोशिश कर रहा हूं। मुझे सही जवाब दो अगर मैं गलत हूँ:

  • npm & bower पैकेज मैनेजर हैं। वे सिर्फ निर्भरता डाउनलोड करते हैं और अपने दम पर प्रोजेक्ट बनाने का तरीका नहीं जानते हैं। वे क्या जानते हैं कि सभी निर्भरता प्राप्त करने के बाद webpack / gulp / webpack को कॉल करना है।
  • bower की तरह है, लेकिन चपटा निर्भरता के पेड़ बनाता है ( npm विपरीत जो इसे पुनरावर्ती करता है)। मतलब npm प्रत्येक निर्भरता के लिए निर्भरता को प्राप्त करता है (कुछ ही समय में हो सकता है), जबकि bower आपको मैन्युअल रूप से उप-निर्भरता शामिल करने की उम्मीद करता है। कभी-कभी bower और npm का उपयोग क्रमशः फ्रंट-एंड और बैक-एंड के लिए किया जाता है (क्योंकि प्रत्येक मेगाबाइट फ्रंट-एंड पर बात कर सकता है)।
  • grunt और gulp ऐसे कार्य धावकों हैं जिन्हें स्वचालित किया जा सकता है (यानी सीएसएस / सैस संकलित करें, छवियों को अनुकूलित करें, एक बंडल बनाएं और इसे छोटा करें)।
  • grunt बनाम gulp ( maven बनाम gradle या कॉन्फ़िगरेशन बनाम कोड की तरह है)। ग्रंट अलग-अलग स्वतंत्र कार्यों को कॉन्फ़िगर करने पर आधारित है, प्रत्येक कार्य फ़ाइल को खोलता / संभालता / बंद करता है। गुल को कोड की कम मात्रा की आवश्यकता होती है और यह नोड धाराओं पर आधारित होता है, जो इसे पाइप श्रृंखला (उसी फ़ाइल को फिर से खोलना w / o) बनाने की अनुमति देता है और इसे तेज़ बनाता है।
  • webpack ( webpack-dev-server ) - मेरे लिए यह बदलावों को फिर से लोड करने के साथ एक कार्य धावक है जो आपको सभी जेएस / सीएसएस देखने वालों के बारे में भूल जाने की अनुमति देता है।
  • npm / bower + plugins कार्य npm जगह ले सकते हैं। यदि आप gulp / grunt npm + plugins का उपयोग करने की आवश्यकता है, तो उनकी क्षमता अक्सर अंतर हो जाती है। लेकिन टास्क रनर निश्चित रूप से जटिल कार्यों के लिए बेहतर होते हैं (जैसे "प्रत्येक बिल्ड पर बंडल बनाते हैं, ES6 से ES5 तक ट्रांसपाइल, इसे सभी ब्राउज़र एमुलेटर पर चलाते हैं, स्क्रीनशॉट बनाते हैं और एफ़टीपी के माध्यम से ड्रॉपबॉक्स में तैनात होते हैं")।
  • ब्राउजर ब्राउजर के लिए पैकेजिंग नोड मॉड्यूल की अनुमति देता है। browserify बनाम node की require वास्तव में एएमडी बनाम कॉमनजस है

प्रशन:

  1. webpack और webpack-dev-server क्या है? आधिकारिक दस्तावेज कहते हैं कि यह एक मॉड्यूल बंडलर है, लेकिन मेरे लिए यह सिर्फ एक कार्य धावक है। क्या फर्क पड़ता है?
  2. आप browserify उपयोग कहां करेंगे? क्या हम नोड / ES6 आयात के साथ भी ऐसा नहीं कर सकते हैं?
  3. आप npm + plugins पर gulp / grunt उपयोग कब करेंगे?
  4. कृपया उदाहरण प्रदान करें जब आपको संयोजन का उपयोग करने की आवश्यकता हो

Webpack और Browserify

Webpack और Browserify बहुत ही समान काम करते हैं, जो आपके कोड को लक्ष्य वातावरण में उपयोग करने के लिए संसाधित कर रहा है (मुख्य रूप से ब्राउज़र, हालांकि आप अन्य वातावरण जैसे नोड को लक्षित कर सकते हैं)। इस तरह के प्रसंस्करण का परिणाम एक या अधिक बंडल है - लक्षित वातावरण के लिए उपयुक्त इकट्ठे स्क्रिप्ट।

उदाहरण के लिए, मान लें कि आपने मॉड्यूल में विभाजित ES6 कोड लिखा है और इसे ब्राउज़र में चलाना चाहते हैं। यदि वे मॉड्यूल नोड मॉड्यूल हैं, तो ब्राउज़र उन्हें समझ नहीं पाएगा क्योंकि वे केवल नोड वातावरण में मौजूद हैं। ES6 मॉड्यूल IE11 जैसे पुराने ब्राउज़र में भी काम नहीं करेगा। इसके अलावा आपने प्रयोगात्मक भाषा सुविधाओं (ES अगले प्रस्ताव) का उपयोग किया हो सकता है कि ब्राउज़र अभी तक लागू नहीं करते हैं इसलिए ऐसी स्क्रिप्ट को चलाना केवल त्रुटियां हैं। Webpack और Browserify जैसे उपकरण इन समस्याओं को ऐसे कोड का रूप देकर ब्राउज़र में अनुवाद कर हल करते हैं जो निष्पादित करने में सक्षम हैं । उसके ऊपर, वे उन बंडलों पर कई प्रकार के अनुकूलन लागू करना संभव बनाते हैं।

हालाँकि, Webpack और Browserify कई मायनों में अलग-अलग होते हैं, Webpack डिफ़ॉल्ट रूप से कई उपकरण प्रदान करता है (जैसे कोड विभाजन), जबकि Browserify प्लगइन्स डाउनलोड करने के बाद ही ऐसा कर सकता है लेकिन दोनों का उपयोग करना बहुत समान परिणाम देता है । यह व्यक्तिगत प्राथमिकता के लिए नीचे आता है (वेबपैक ट्रेंडियर है)। Btw, Webpack एक टास्क रनर नहीं है, यह आपकी फ़ाइलों का प्रोसेसर है (यह उन्हें तथाकथित लोडर और प्लगइन्स द्वारा प्रोसेस करता है) और इसे टास्क रनर द्वारा (अन्य तरीकों से) चलाया जा सकता है।

वेबपैक देव सर्वर

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

टास्क रनर बनाम एनपीएम स्क्रिप्ट

मैं अपनी सुगमता और आसान कार्य लेखन के लिए गल्प का उपयोग कर रहा हूं, लेकिन बाद में मुझे पता चला कि मुझे न तो घोल की जरूरत है और न ही ग्रंट की। जो कुछ भी मुझे चाहिए वह सब कुछ उनके एपीआई के माध्यम से 3-पार्टी उपकरण चलाने के लिए एनपीएम लिपियों का उपयोग करके किया जा सकता था। गल्प, ग्रंट या एनपीएम स्क्रिप्ट के बीच चयन आपकी टीम के स्वाद और अनुभव पर निर्भर करता है।

जबकि गुल्प या ग्रंट में कार्य जेएस से परिचित लोगों के लिए भी पढ़ना आसान है, फिर भी इसे सीखने और सीखने का एक और साधन है और मैं व्यक्तिगत रूप से अपनी निर्भरता को कम करना और चीजों को सरल बनाना पसंद करता हूं। दूसरी ओर, एनपीएम लिपियों और (संभवतः जेएस) लिपियों के संयोजन के साथ इन कार्यों को बदलना जो उन 3 जी उपकरणों को चलाते हैं (जैसे। नोड स्क्रिप्ट को कॉन्फ़िगर करना और सफाई के प्रयोजनों के लिए rimraf चलाना) अधिक चुनौतीपूर्ण हो सकता है। लेकिन अधिकांश मामलों में, परिणाम के संदर्भ में वे तीन समान हैं।

उदाहरण

उदाहरणों के अनुसार, मेरा सुझाव है कि आप इस रिएक्टर स्टार्टर प्रोजेक्ट पर एक नज़र डालें, जो आपको एनपीएम और जेएस लिपियों का एक अच्छा संयोजन दिखाता है जो पूरे निर्माण और तैनाती प्रक्रिया को कवर करता है। आप scripts नाम की संपत्ति में, पैकेज में उन NPM स्क्रिप्ट्स को रूट फ़ोल्डर में पा सकते हैं। वहाँ आप ज्यादातर babel-node tools/run start जैसे कमांड का सामना करेंगे। बैबल-नोड एक सीएलआई उपकरण है (उत्पादन उपयोग के लिए नहीं), जो पहले ईएस 6 फ़ाइल tools/run (रन.जेएस फाइल tools में स्थित) को संकलित करता है - मूल रूप से एक रनर उपयोगिता। यह धावक एक फ़ंक्शन को एक तर्क के रूप में लेता है और इसे निष्पादित करता है, जो इस मामले में start - एक और उपयोगिता (start.js) स्रोत फ़ाइलों (क्लाइंट और सर्वर दोनों) को बंडल करने और एप्लिकेशन और डेवलपमेंट सर्वर (देव सर्वर) को शुरू करने के लिए जिम्मेदार होगा। शायद या तो वेबपैक देव सर्वर या ब्राउजरसिंक)।

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

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)

महत्वपूर्ण हिस्सा proxy.target है। proxy.target , जहां वे सर्वर एड्रेस सेट करते हैं, जिसे वे प्रॉक्सी करना चाहते हैं, जो http: // localhost: 3000 हो सकता है, और proxy.target http: // localhost: 3001 पर सुनता है, जहां उत्पन्न संपत्ति परोसी जाती है। स्वचालित परिवर्तन का पता लगाने और गर्म मॉड्यूल प्रतिस्थापन के साथ। जैसा कि आप देख सकते हैं, व्यक्तिगत फ़ाइलों या पैटर्न के साथ एक और कॉन्फ़िगरेशन प्रॉपर्टी है ब्राउज़र-सिंक में परिवर्तन के लिए देखता है और कुछ होने पर ब्राउज़र को फिर से लोड करता है, लेकिन जैसा कि टिप्पणी कहती है, वेबपैक एचएमआर के साथ स्वयं द्वारा js स्रोतों को देखने का ध्यान रखता है, इसलिए वे वहां सहयोग करें।

अब मेरे पास इस तरह के ग्रंट या गल्प विन्यास का कोई समान उदाहरण नहीं है, लेकिन गल्प (और ग्रंट के साथ कुछ इसी तरह) के साथ आप gulpfile.js में व्यक्तिगत कार्य लिखेंगे

gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});

जहाँ आप स्टार्टर-किट में अनिवार्य रूप से बहुत कुछ कर रहे होंगे, इस बार टास्क रनर के साथ, जो आपके लिए कुछ समस्याओं को हल करता है, लेकिन उपयोग सीखने के दौरान अपने स्वयं के मुद्दों और कुछ कठिनाइयों को प्रस्तुत करता है, और जैसा कि मैं कहता हूं, आपके पास जितनी अधिक निर्भरताएं हैं, उतना ही गलत हो सकता है। और यही कारण है कि मुझे ऐसे उपकरणों से छुटकारा पाना पसंद है।


आप npmcompare पर कुछ तकनीकी तुलना पा सकते हैं

तुलना ब्राउज़र बनाम ग्रंट बनाम गल्प बनाम वेबपैक

जैसा कि आप देख सकते हैं कि वेबपैक हर 4 दिनों में औसतन एक नए संस्करण के साथ बहुत अच्छी तरह से बनाए रखा जाता है। लेकिन लगता है कि गुल्प उन सभी का सबसे बड़ा समुदाय है (गितुब पर 20K सितारों के साथ) ग्रंट थोड़ा उपेक्षित (दूसरों की तुलना में) लगता है

इसलिए अगर मुझे एक को चुनने की जरूरत है तो मैं गुल के साथ जाऊंगा


यार्न एक हालिया पैकेज मैनेजर है जिसका शायद उल्लेख किया जाना चाहिए। तो, वहाँ: Yarn

Afaik, यह npm और bower निर्भरता दोनों प्राप्त कर सकता है और इसमें अन्य सराहनीय विशेषताएं हैं।


ठीक है, उन सभी को कुछ समानताएं मिली हैं, वे अलग-अलग और समान तरीकों से आपके लिए समान काम करते हैं, मैं उन्हें 3 मुख्य समूहों में विभाजित करता हूं:

1) मॉड्यूल बंडल

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

webpack

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

यह अविश्वसनीय रूप से विन्यास योग्य है, लेकिन आरंभ करने के लिए आपको केवल चार कोर अवधारणाओं को समझने की आवश्यकता है: प्रवेश, आउटपुट, लोडर और प्लगइन्स।

इस दस्तावेज़ का उद्देश्य इन अवधारणाओं का एक उच्च-स्तरीय अवलोकन देना है, जबकि विस्तृत अवधारणा विशिष्ट उपयोग-मामलों के लिंक प्रदान करना है।

here

browserify

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

here

2) टास्क रनर

gulp और ग्रंट टास्क रनर हैं, मूल रूप से वे जो भी करते हैं, कार्यों को बनाते हैं और जब चाहें तब उन्हें चलाते हैं, उदाहरण के लिए आप अपने CSS को छोटा करने के लिए एक प्लगइन स्थापित करते हैं और फिर प्रत्येक बार इसे छोटा करने के लिए चलाते हैं, प्रत्येक के बारे में अधिक विवरण:

घूंट

gulp.js फ्रैक्टल इनोवेशन द्वारा एक ओपन-सोर्स जावास्क्रिप्ट टूलकिट है और गिटहब में ओपन सोर्स समुदाय है, जिसका उपयोग फ्रंट-एंड वेब डेवलपमेंट में स्ट्रीमिंग सिस्टम के रूप में किया जाता है। यह Node.js और Node Package Manager (npm) पर बनाया गया एक टास्क रनर है, जिसका उपयोग वेब डेवलपमेंट में शामिल होने में समय लेने वाली और दोहराव कार्यों के स्वचालन के लिए किया जाता है जैसे कि minification, concatenation, cache busting, यूनिट टेस्टिंग, लाइनिंग, ऑप्टिमाइज़ेशन आदि gulp का उपयोग करता है। अपने कार्यों को परिभाषित करने के लिए एक कोड-ओवर-कॉन्फ़िगरेशन दृष्टिकोण और उन्हें बाहर ले जाने के लिए अपने छोटे, एकल-उद्देश्य वाले प्लगइन्स पर निर्भर करता है। gulp ecosystem में 1000+ ऐसे प्लगइन्स उपलब्ध हैं जो चुनने के लिए उपलब्ध हैं।

here

असंतोष का शब्द

ग्रंट एक जावास्क्रिप्ट टास्क रनर है, एक उपकरण जिसका उपयोग स्वचालित रूप से अक्सर उपयोग किए जाने वाले कार्यों जैसे कि खनन, संकलन, इकाई परीक्षण, लाइनिंग आदि के लिए किया जाता है। यह एक फाइल में परिभाषित कस्टम कार्यों को चलाने के लिए कमांड-लाइन इंटरफेस का उपयोग करता है (जिसे ग्रंटफाइल के रूप में जाना जाता है) । ग्रंट बेन अल्मन द्वारा बनाया गया था और Node.js. में लिखा गया है यह npm के माध्यम से वितरित किया जाता है। वर्तमान में, ग्रंट पारिस्थितिकी तंत्र में पांच हजार से अधिक प्लगइन्स उपलब्ध हैं।

here

3) पैकेज मैनेजर

पैकेज मैनेजर, जो वे करते हैं वह आपके एप्लिकेशन में आपके लिए आवश्यक प्लग-इन का प्रबंधन करता है और पैकेज के लिए github आदि के माध्यम से आपके लिए उन्हें स्थापित करता है। पैकेज का उपयोग करके, आप को अपडेट करने के लिए बहुत आसान है, उन्हें इंस्टॉल करें और अपने ऐप को साझा करें, प्रत्येक के लिए अधिक विवरण:

NPM

npm जावास्क्रिप्ट प्रोग्रामिंग भाषा के लिए एक पैकेज मैनेजर है। यह जावास्क्रिप्ट रनटाइम वातावरण के लिए डिफ़ॉल्ट पैकेज प्रबंधक है Node.js. इसमें एक कमांड लाइन क्लाइंट होता है, जिसे npm भी कहा जाता है, और सार्वजनिक संकुल का एक ऑनलाइन डेटाबेस, जिसे npm रजिस्ट्री कहा जाता है। रजिस्ट्री को क्लाइंट के माध्यम से एक्सेस किया जाता है, और उपलब्ध पैकेजों को ब्राउज करके npm वेबसाइट के माध्यम से खोजा जा सकता है।

NPM

कुंज

Bower उन घटकों को प्रबंधित कर सकता है जिनमें HTML, CSS, जावास्क्रिप्ट, फोंट या यहां तक ​​कि छवि फाइलें हैं। बोवर कोड को संक्षिप्त या छोटा नहीं करता है या कुछ और नहीं करता है - यह सिर्फ उन पैकेजों के सही संस्करणों को स्थापित करता है जिनकी आपको ज़रूरत है और उनकी निर्भरताएं हैं। आरंभ करने के लिए, बोवर को हर जगह से पैकेज लाने और स्थापित करने, शिकार की देखभाल करने, खोजने, डाउनलोड करने और सामान की तलाश में बचत करने का काम करता है। Bower इन पैकेजों का ट्रैक एक प्रकट फ़ाइल, bower.json में रखता है।

Bower

और सबसे हाल ही में पैकेज प्रबंधक जो याद नहीं किया जाना चाहिए, यह वास्तविक काम के माहौल में युवा और तेज है npm की तुलना में जो मैं ज्यादातर पहले उपयोग कर रहा था, मॉड्यूल को फिर से स्थापित करने के लिए, यह मॉड्यूल के अस्तित्व की जांच करने के लिए नोड_मॉडल फ़ोल्डर की दोहरी जांच करता है, यह भी लगता है कि मॉड्यूल स्थापित करने में कम समय लगता है:

धागा

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

यार्न आपको विभिन्न समस्याओं के लिए अन्य डेवलपर्स समाधानों का उपयोग करने की अनुमति देता है, जिससे आपके लिए अपने सॉफ़्टवेयर को विकसित करना आसान हो जाता है। यदि आपको समस्याएँ हैं, तो आप समस्याओं की रिपोर्ट कर सकते हैं या वापस योगदान कर सकते हैं, और जब समस्या ठीक हो जाती है, तो आप इसे सभी अद्यतित रखने के लिए यार्न का उपयोग कर सकते हैं।

कोड को पैकेज के रूप में कुछ के माध्यम से साझा किया जाता है (कभी-कभी एक मॉड्यूल के रूप में संदर्भित)। एक पैकेज में सभी कोड के साथ-साथ एक पैकेज साझा किया जाता है। पैकेज की जानकारी देने वाली फ़ाइल।

here


अपडेट अक्टूबर 2018

यदि आप अभी भी फ्रंट-एंड देव के बारे में अनिश्चित हैं, तो यहां एक उत्कृष्ट संसाधन पर एक नज़र डाल सकते हैं।

https://github.com/kamranahmedse/developer-roadmap

अपडेट जून 2018

आधुनिक जावास्क्रिप्ट सीखना कठिन है यदि आप शुरुआत से ही वहां नहीं हैं। यदि आप नए कॉमरेड हैं, तो बेहतर अवलोकन करने के लिए लिखे गए इस उत्कृष्ट को जांचना न भूलें।

https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

जुलाई 2017 को अपडेट करें

हाल ही में मैंने 2017 में फ्रंट-एंड डेवलपमेंट को कैसे एप्रोच किया जाए, इसके बारे में ग्रैब टीम से एक बहुत व्यापक गाइड पाया। आप इसे नीचे की तरह देख सकते हैं।

https://github.com/grab/front-end-guide

मैं इसके लिए काफी समय से खोज कर रहा हूं क्योंकि वहां बहुत सारे उपकरण हैं और उनमें से प्रत्येक हमें एक अलग पहलू में लाभान्वित करता है। समुदाय को Browserify, Webpack, jspm, Grunt and Gulp जैसे उपकरणों में विभाजित किया गया है। आप Yeoman or Slush बारे में भी सुन सकते हैं। यह वास्तव में कोई समस्या नहीं है, यह सिर्फ एक स्पष्ट मार्ग को समझने की कोशिश कर रहे सभी के लिए भ्रमित करने वाला है।

वैसे भी, मैं कुछ योगदान देना चाहूंगा।

1. पैकेज मैनेजर

पैकेज प्रबंधक प्रोजेक्ट की निर्भरता को स्थापित करने और अद्यतन करने को सरल बनाते हैं, जो पुस्तकालय हैं: जैसे: jQuery, Bootstrap , आदि - आपकी साइट पर उपयोग होने वाली और आपके द्वारा नहीं लिखी जाने वाली हर चीज।

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

  • NPM मतलब है: Node JS package manager आपको उन सभी पुस्तकालयों का प्रबंधन करने में मदद करता है, जिन पर आपका सॉफ्टवेयर निर्भर करता है। आप package.json नामक एक फाइल में अपनी आवश्यकताओं को परिभाषित करेंगे और कमांड लाइन में npm install रन करेंगे ... तो BANG, आपके पैकेज डाउनलोड हो गए हैं और उपयोग के लिए तैयार हैं। front-end and back-end लाइब्रेरी दोनों के लिए इस्तेमाल किया जा सकता है।

  • Bower : फ्रंट-एंड पैकेज प्रबंधन के लिए, अवधारणा एनपीएम के साथ समान है। आपके सभी पुस्तकालयों को bower.json नाम की एक फ़ाइल में संग्रहीत किया जाता है और फिर कमांड लाइन में bower install चलाते हैं।

Bower और NPM बीच सबसे बड़ा अंतर यह है कि एनपीएम निर्भरता के पेड़ को काटता है जबकि बोवर को नीचे की तरह एक फ्लैट निर्भरता के पेड़ की आवश्यकता होती है।

बोवर और npm के बीच अंतर क्या है?

NPM

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A 
    -> dependency D

Bower

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

npm 3 Duplication and Deduplication पर कुछ अपडेट हैं, कृपया अधिक विवरण के लिए डॉक खोलें।

  • Yarn : NPM की तुलना में कुछ और फायदों के साथ Facebook द्वारा हाल ही में Facebook द्वारा published JavaScript लिए एक नया पैकेज मैनेजर। और यार्न के साथ, आप अभी भी पैकेज लाने के लिए NPM और Bower रजिस्ट्री दोनों का उपयोग कर सकते हैं। यदि आपने पहले एक पैकेज स्थापित किया है, तो yarn एक कैश्ड कॉपी बनाता है जो offline package installs सुविधा देता है।

  • jspm : SystemJS यूनिवर्सल मॉड्यूल लोडर के लिए एक पैकेज मैनेजर है, जो गतिशील ES6 मॉड्यूल लोडर के शीर्ष पर बनाया गया है। यह नियमों के अपने सेट के साथ एक पूरी तरह से नया पैकेज प्रबंधक नहीं है, बल्कि यह मौजूदा पैकेज स्रोतों के शीर्ष पर काम करता है। बॉक्स से बाहर, यह GitHub और npm साथ काम करता है। चूँकि अधिकांश Bower आधारित पैकेज GitHub पर आधारित होते हैं, हम उन संकुल को jspm साथ भी संस्थापित कर सकते हैं। इसकी एक रजिस्ट्री है जो आसान स्थापना के लिए आमतौर पर उपयोग किए जाने वाले फ्रंट-एंड पैकेजों की सूची देती है।

Bower और jspm बीच का अंतर देखें: पैकेज मैनेजर: Bower बनाम jspm

2. मॉड्यूल लोडर / बंडलिंग

किसी भी पैमाने की अधिकांश परियोजनाओं में कई फाइलों के बीच उनका कोड विभाजित होगा। आप बस प्रत्येक फ़ाइल को एक व्यक्ति के साथ शामिल कर सकते हैं <script> टैग, हालाँकि, <script> एक नया http कनेक्शन स्थापित करता है, और छोटी फ़ाइलों के लिए - जो प्रतिरूपता का लक्ष्य है - कनेक्शन सेट करने का समय स्थानान्तरण से अधिक समय ले सकता है। आँकड़े। जबकि स्क्रिप्ट डाउनलोड हो रही हैं, पृष्ठ पर कोई भी सामग्री नहीं बदली जा सकती।

  • डाउनलोड समय की समस्या को काफी हद तक सरल मॉड्यूल के एक समूह को एक फ़ाइल में समाहित करके और इसे छोटा करके हल किया जा सकता है।

उदाहरण के लिए

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>
  • प्रदर्शन हालांकि लचीलेपन की कीमत पर आता है। यदि आपके मॉड्यूल में अंतर-निर्भरता है, तो लचीलापन की कमी शोस्टॉपर हो सकती है।

उदाहरण के लिए

<head>
    <title>Skateboard</title>
    <script src=“connectors/axle.js”></script>
    <script src=“frames/board.js”></script>
    <!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
    <script src=“rolling-things/abstract-rolling-thing.js”></script>
    <script src=“rolling-things/wheels/skateboard-wheel.js”></script>
    <!-- but if skateboard-wheel also depends on ball-bearing -->
    <!-- then having this script tag here could cause a problem -->
    <script src=“rolling-things/ball-bearing.js”></script>
    <!-- connect wheels to axle and axle to frame -->
    <script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>

कंप्यूटर आप की तुलना में बेहतर कर सकते हैं, और यही कारण है कि आपको एक फ़ाइल में स्वचालित रूप से सब कुछ बंडल करने के लिए एक उपकरण का उपयोग करना चाहिए।

फिर हमने RequireJS , Browserify , SystemJS और SystemJS बारे में सुना

  • RequireJS : एक JavaScript फ़ाइल और मॉड्यूल लोडर है। यह ब्राउज़र के उपयोग के लिए अनुकूलित है, लेकिन इसे Node जैसे अन्य जावास्क्रिप्ट वातावरणों में उपयोग किया जा सकता है।

जैसे: myModule.js

// package/lib is a dependency we require
define(["package/lib"], function (lib) {

    // behavior for our module
    function foo() {
        lib.log( "hello world!" );
    }

    // export (expose) foo to other modules as foobar
    return {
        foobar: foo
    }
});

main.js , हम myModule.js को निर्भरता के रूप में आयात कर सकते हैं और इसका उपयोग कर सकते हैं।

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

और फिर हमारे HTML , हम आवश्यकताएँ के साथ उपयोग करने के लिए संदर्भित कर सकते हैं।

<script src=“app/require.js data-main=“main.js ></script>

आसानी से समझ पाने के लिए CommonJS और AMD बारे में अधिक पढ़ें। कॉमनजेएस, एएमडी और रिक्जेजेएस के बीच संबंध?

  • Browserify : Browserify स्वरूपित मॉड्यूल के उपयोग की अनुमति देने के लिए निर्धारित किया गया है। नतीजतन, Browserify एक मॉड्यूल बंडलर के रूप में एक मॉड्यूल लोडर नहीं है: Browserify पूरी तरह से एक बिल्ड-टाइम टूल है, जो कोड के एक बंडल का उत्पादन करता है जिसे फिर क्लाइंट-साइड लोड किया जा सकता है।

एक निर्माण मशीन के साथ शुरू करें जिसमें नोड और एनपीएम स्थापित है, और पैकेज प्राप्त करें:

npm install -g save-dev browserify

अपने मॉड्यूल CommonJS प्रारूप में लिखें

//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));

और खुश होने पर, बंडल करने के लिए आदेश जारी करें:

browserify entry-point.js -o bundle-name.js

ब्राउज़र को पुन: प्रवेश-बिंदु की सभी निर्भरता का पता लगाता है और उन्हें एक एकल फ़ाइल में संयोजित करता है:

<script src=”bundle-name.js”></script>
  • Webpack : यह JavaScript , चित्र, सीएसएस और अधिक सहित आपकी सभी स्थिर संपत्तियों को एक ही फाइल में बंडल करता है। यह आपको विभिन्न प्रकार के लोडर के माध्यम से फ़ाइलों को संसाधित करने में भी सक्षम बनाता है। आप अपना JavaScript CommonJS या AMD मॉड्यूल सिंटैक्स के साथ लिख सकते हैं। यह मूलभूत रूप से अधिक एकीकृत और जनमत तरीके से बिल्ड समस्या पर हमला करता है। Browserify आप काम पाने के लिए Browserify Gulp/Grunt और ट्रांसफॉर्म और प्लगइन्स की एक लंबी सूची का उपयोग करते हैं। Webpack बॉक्स के बाहर पर्याप्त शक्ति प्रदान करता है जिसे आपको आमतौर पर Grunt या Gulp आवश्यकता नहीं होती है।

बुनियादी उपयोग सरल से परे है। ब्राउज़र की तरह वेबपैक स्थापित करें:

npm install -g save-dev webpack

और कमांड को एक एंट्री पॉइंट और एक आउटपुट फाइल पास करें:

webpack ./entry-point.js bundle-name.js
  • SystemJS : एक मॉड्यूल लोडर है जो आज इस्तेमाल किए जाने वाले किसी भी लोकप्रिय प्रारूप ( CommonJS, UMD, AMD, ES6 ) में मॉड्यूल को आयात कर सकता है । यह ES6 मॉड्यूल लोडर पॉलीफिल के शीर्ष पर बनाया गया है और उपयोग किए जा रहे प्रारूप का पता लगाने और इसे उचित तरीके से संभालने के लिए पर्याप्त स्मार्ट है। SystemJS ES6 कोड ( Babel या Traceur ) या अन्य भाषाओं जैसे कि TypeScript और TypeScript का उपयोग करके भी TypeScript कर सकता है।

जानना चाहते हैं कि node module क्या है और इसे ब्राउज़र में अच्छी तरह से अनुकूलित क्यों नहीं किया गया है।

अधिक उपयोगी लेख:

क्यों jspm और SystemJS ?

ES6 मॉड्यूलरिटी का एक मुख्य लक्ष्य यह है कि इंटरनेट पर कहीं से भी किसी भी जावास्क्रिप्ट लाइब्रेरी को स्थापित करना और उसका उपयोग करना आसान है ( Github , npm , आदि)। केवल दो चीजों की जरूरत है:

  • पुस्तकालय स्थापित करने के लिए एक एकल आदेश
  • पुस्तकालय को आयात करने और इसका उपयोग करने के लिए कोड की एक एकल पंक्ति

तो jspm साथ, आप इसे कर सकते हैं।

  1. एक कमांड के साथ लाइब्रेरी स्थापित करें: jspm install jquery
  2. कोड की एक पंक्ति के साथ पुस्तकालय आयात करें, आपको HTML फ़ाइल के अंदर बाहरी संदर्भ की आवश्यकता नहीं है।

display.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");
  1. फिर आप अपने मॉड्यूल को आयात करने से पहले System.config({ ... }) भीतर इन चीजों को कॉन्फ़िगर करते हैं। आम तौर पर जब jspm init चलाते हैं, तो इस उद्देश्य के लिए config.js नामक एक फ़ाइल होगी।

  2. इन लिपियों को चलाने के लिए, हमें HTML पेज पर system.js और config.js लोड करना होगा। उसके बाद हम SystemJS मॉड्यूल लोडर का उपयोग करके display.js फ़ाइल लोड करेंगे।

index.html

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import("scripts/display.js");
</script>

नोट किया गया: आप npm साथ npm भी उपयोग कर सकते हैं क्योंकि Angular 2 ने इसे लागू किया है। चूंकि jspm को jspm साथ एकीकृत करने के लिए विकसित किया गया था और यह मौजूदा npm स्रोत के शीर्ष पर काम करता है, इसलिए आपका जवाब आपके ऊपर है।

3. टास्क रनर

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

  • Grunt : आप अपने विकास के वातावरण के लिए ऑटोमेशन को प्री-प्रोसेस कोड के लिए बना सकते हैं या एक कॉन्फिगर फाइल के साथ स्क्रिप्ट बना सकते हैं और एक जटिल कार्य को संभालना बहुत मुश्किल लगता है। पिछले कुछ वर्षों में लोकप्रिय है।

Grunt में प्रत्येक कार्य विभिन्न प्लगइन कॉन्फ़िगरेशन की एक सरणी है, जो कि एक कड़ाई से स्वतंत्र और क्रमबद्ध तरीके से बस एक के बाद एक निष्पादित हो जाते हैं।

grunt.initConfig({
  clean: {
    src: ['build/app.js', 'build/vendor.js']
  },

  copy: {
    files: [{
      src: 'build/app.js',
      dest: 'build/dist/app.js'
    }]
  }

  concat: {
    'build/app.js': ['build/vendors.js', 'build/app.js']
  }

  // ... other task configurations ...

});

grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);
  • Gulp : Grunt तरह ही ऑटोमेशन लेकिन कॉन्फ़िगरेशन के बजाय, आप JavaScript को स्ट्रीम के साथ लिख सकते हैं जैसे कि यह एक नोड एप्लीकेशन है। इन दिनों को प्राथमिकता दें।

यह एक Gulp नमूना कार्य घोषणा है।

//import the necessary gulp plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');

//declare the task
gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

और देखें: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri

4. मचान उपकरण

  • Slush and Yeoman : आप उनके साथ स्टार्टर प्रोजेक्ट बना सकते हैं। उदाहरण के लिए, आप HTML और SCSS के साथ एक प्रोटोटाइप बनाने की योजना बना रहे हैं, फिर मैन्युअल रूप से कुछ फ़ोल्डर जैसे scss, css, img, फ़ॉन्ट्स बनाएं। आप बस yeoman स्थापित कर सकते हैं और एक साधारण स्क्रिप्ट चला सकते हैं। फिर यहां आपके लिए सब कुछ।

here और जानें

npm install -g yo
npm install --global generator-h5bp
yo h5bp

और देखें: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express

मेरा जवाब वास्तव में प्रश्न की सामग्री के साथ मेल नहीं खाता है, लेकिन जब मैं Google पर इन ज्ञान की खोज कर रहा हूं, तो मैं हमेशा सवाल को शीर्ष पर देखता हूं, इसलिए मैंने सारांश में इसका जवाब देने का फैसला किया। आशा है कि आप लोगों को यह मददगार लगा होगा।