🗡️ 🛕 🏬 Browserify के साथ शुरू हो रही है ⛳️ ♣️ 💠

परिचय

जावास्क्रिप्ट समाधान साल दर साल और अधिक जटिल होते जाते हैं। यह निस्संदेह वेब के रूप में इस तरह के एक सुंदर जानवर की वृद्धि के कारण है। हम में से कई अब जावास्क्रिप्ट मॉड्यूल के साथ काम कर रहे हैं - स्वतंत्र कार्यात्मक घटक जो एक साथ आते हैं और एक पूरे के रूप में काम करते हैं। इसके अलावा, यह तरीका हमें कोड को खत्म करने के बिना घटकों के विनिमेयता को लागू करने की अनुमति देता है। हम में से कई ने एएमडी पैटर्न का इस्तेमाल किया और इसके लिए इसके कार्यान्वयन की आवश्यकता है।

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

Browserify क्या है?

Browserify आपको ब्राउज़र में काम करने के लिए मॉड्यूल्स के नोड.जेएस स्टाइल का उपयोग करने की अनुमति देता है। हम निर्भरता को परिभाषित करते हैं और फिर Browserify उन्हें एक छोटी और साफ जावास्क्रिप्ट फ़ाइल में इकट्ठा करता है। आपको अपनी जावास्क्रिप्ट फ़ाइलों को शामिल करने की require("./_.js");

अभिव्यक्ति। आप npm से सार्वजनिक मॉड्यूल का उपयोग भी कर सकते हैं। Browserify के लिए, सोर्स मैप्स (कम्प्रेशन से पहले सोर्स फाइल्स के मैप्स) बनाना मुश्किल नहीं है, इसलिए कंसीनेशन के बावजूद भी आप पैकेज के अलग-अलग हिस्सों को डीबग कर सकते हैं, जैसे आप अलग-अलग फाइल्स के साथ करते थे।

क्यों आयात नोड मॉड्यूल?

मॉड्यूल आयात करना एक आशीर्वाद है: किसी विशेष जावास्क्रिप्ट पुस्तकालय को डाउनलोड करने के लिए लिंक की तलाश करने के बजाय, आप बस require()

बाद उन्हें कनेक्ट करते हैं (जाँचने के बाद कि वे npm के माध्यम से स्थापित हैं) और यह बात है! आप jQuery , Underscore , Backbone और यहां तक कि Angular (अनौपचारिक पोर्ट) जैसी लोकप्रिय JavaScript लाइब्रेरी का उपयोग कर सकते हैं। वे सभी npm के माध्यम से डाउनलोड और काम के लिए उपलब्ध हैं। यदि आप एक ऐसी साइट पर काम कर रहे हैं जो पहले से ही नोड का उपयोग करती है, तो आप बस अपने विकास को सरल बनाते हैं, क्योंकि अब आप अपने सभी जेएस लिपियों की सामान्य वास्तुकला का उपयोग कर सकते हैं। मुझे वास्तव में यह दृष्टिकोण पसंद है!

आपको क्या चाहिए?

Browserify के साथ शुरुआत करने के लिए, आपको निम्नलिखित काम करने होंगे:

Node.js

npm - डिफ़ॉल्ट रूप से node.js के साथ भेज दिया

Browserify - मैं समझाऊंगा कि इसे कैसे इंस्टॉल किया जाए

खैर, और, तदनुसार, जेएस फाइलों का एक सेट जिसे आप के साथ काम करना चाहते हैं।

शुरुआत हो रही है

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

 npm install -g browserify

मुझे थोड़ा समझाइए कि हम यहाँ क्या कर रहे हैं: हम आपकी मशीन पर वैश्विक वातावरण में Browserify स्थापित करने के लिए npm का उपयोग करते हैं ( -g

ध्वज npm को मॉड्यूल को विश्व स्तर पर स्थापित करने के लिए कहता है)। यदि आप निम्नलिखित के समान समस्या को समाप्त करते हैं:

 Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'

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

अपनी पहली ब्राउज़र फ़ाइल बनाएँ

आइए एक फाइल बनाकर शुरू करें, जिसे हम Browserify के साथ प्रोसेस करेंगे। उदाहरण के लिए, चलो सुपर-लोकप्रिय अंडरस्कोर मॉड्यूल लेते हैं। हम इसका उपयोग सुपरमैन की खोज के लिए करेंगे। मैंने अपनी JS फाइल को main.js

नाम दिया और js

फोल्डर में डाल दिया।

आइए ब्राउज़र की require()

विधि का उपयोग करके अंडरस्कोर के तहत चर _

को जलाकर शुरू करें:

 var _ = require('underscore');

अब, हम अंडरस्कोर लाइब्रेरी से each()

और फाइंड find()

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

 var _ = require('underscore'), names = ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'], otherNames = ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen']; _.each([names, otherNames], function(nameGroup) { findSuperman(nameGroup); }); function findSuperman(values) { _.find(values, function(name) { if (name === 'Clark Kent') { console.log('It\'s Superman!'); } else { console.log('... No superman!'); } }); }

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

 npm install underscore

उन लोगों के लिए जो नोड और एनपीएम के संचालन के तंत्र से परिचित नहीं हैं, मैं समझाता हूं कि यह कोड प्रोजेक्ट फ़ोल्डर में node_modules

निर्देशिका बनाएगा। यह निर्देशिका आपके अंडरस्कोर मॉड्यूल की मेजबानी करेगी। टीम को Npm रिपॉजिटरी ( https://registry.npmjs.org/undoncore ) से अंडरस्कोर का नवीनतम संस्करण मिलेगा। हमारे node_modules

निर्देशिका में इस मॉड्यूल के साथ, ब्राउज़राइज़ आसानी से इसे खोज और उपयोग कर सकता है।

पहली बार Browserify लॉन्च करें

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

कहने का फैसला किया। मैं प्रोजेक्ट रूट फ़ोल्डर से एक कमांड चलाता हूं:

 browserify js/main.js -o js/findem.js -d

यह कमांड आपके main.js को पढ़ता है और अपनी सामग्री findem.js

को findem.js

(निश्चित रूप से, पैकेज निर्भरता सहित । प्रति। Per। ) । , जो -o

विकल्प का उपयोग करके निर्दिष्ट किया गया था। मैंने अनुरोध में -d

विकल्प भी शामिल किया है, इसलिए हमारी टीम हमारी फ़ाइल के लिए एक स्रोत मानचित्र भी बनाएगी। इसके लिए धन्यवाद, हम underscore

और main.js

को दो अलग-अलग फ़ाइलों के रूप में डीबग कर सकते हैं।

Browserify Output File का उपयोग करना

आउटपुट ब्राउजरफाई फ़ाइल ठीक उसी तरह से जुड़ी है जैसे कोई अन्य जेएस फाइल:

 <script src="js/findem.js"></script>

अपनी खुद की जावास्क्रिप्ट फ़ाइलें आयात करना

यह बहुत अच्छा नहीं है अगर हमारे आवेदन में केवल node_modules

फ़ोल्डर शामिल होंगे। अपने स्वयं के जावास्क्रिप्ट कोड को जोड़ने के लिए, आप require()

फ़ंक्शन के साथ उसी दृष्टिकोण का उपयोग कर सकते हैं। कोड की यह लाइन एक JS फ़ाइल आयात करती है जिसका नाम your_module.js

 greatestModuleEver = require('./your_module.js');

इस तरह से अपने जावास्क्रिप्ट को आयात करने के लिए, हमें अपने जावास्क्रिप्ट कोड को एक मॉड्यूल के रूप में स्टाइल करने की आवश्यकता है। ऐसा करने के लिए, module.exports

परिभाषित module.exports

। ऐसा करने का एक तरीका नीचे दिखाया गया है।

 module.exports = function(vars) { //   }

नोट!

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

एक मॉड्यूल के साथ हमारा उदाहरण

अधिक स्पष्ट रूप से यह दिखाने के लिए कि यह कैसे काम करता है, हम अपने सरणियों को पिछले सुपर हीरो उदाहरण से लेंगे और उन्हें एक अलग जेएस मॉड्यूल में जगह देंगे, जो हमारे लिए नामों की एक सरणी लौटाएगा। मॉड्यूल इस तरह दिखेगा:

 module.exports = function() { return ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen', 'Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent']; }

खैर, अब हम इस मॉड्यूल को अपने परिवर्तनशील names = require("./names.js");

में आयात कर रहे हैं names = require("./names.js");

:

 var _ = require('underscore'), names = require('./names.js'); findSuperman(names()); function findSuperman(values) { _.find(values, function(name) { if (name === 'Clark Kent') { console.log('It\'s Superman!'); } else { console.log('... No superman!'); } }); }

हमारे names

चर मॉड्यूल से निर्यात समारोह को संदर्भित करता है। इसलिए, हम एक चर के रूप में names

चर का उपयोग करते हैं जिसे हमें findSuperman()

लिए सरणी की आवश्यकता होती है।

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

Variables और पासिंग मॉड्यूल में पासिंग हमारे ऐप के पार

आइए हमारे सरल सुपरमैन खोज एप्लिकेशन को थोड़ा जटिल करें - आइए एक अलग मॉड्यूल में findSuperman()

फ़ंक्शन को findSuperman()

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

हम अपने मॉड्यूल में चर भी पास कर सकते हैं और हमारे रिटर्न फ़ंक्शन ( module.exports

) में उनका उपयोग कर सकते हैं, और इसे स्पष्ट करने के लिए, हम एक findsuperman.js

फ़ाइल findsuperman.js

जो नामों की एक सरणी को स्वीकार करेगा:

 module.exports = function (values) { var foundSuperman = false; _.find(values, function(name) { if (name === 'Clark Kent') { console.log('It\'s Superman!'); foundSuperman = true; } else { console.log('... No superman!'); } }); return foundSuperman; }

मैंने हमारे findSuperman()

फ़ंक्शन के लिए एक वापसी मान जोड़ा है। यदि वह सुपरमैन पाता true

, तो true

, अन्यथा false

। और फिर इसे उस कोड को हल करने दें जो इस मॉड्यूल को कॉल करता है। लेकिन जैसा कि यह हो सकता है, हम एक चीज़ से चूक गए: हमारा कोड अंडरस्कोर का उपयोग करता है, लेकिन हमने इसे घोषित नहीं किया। अंडरस्कोर जोड़ने के बाद, हमारे कोड ने निम्नलिखित फॉर्म लिया:

 var _ = require('underscore'); module.exports = function (values) { ... }

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

में भी शामिल करते हैं, लेकिन जब Browserify इसे सभी को एक साथ लाता है, तो यह इसे केवल एक बार जोड़ देगा। कूल, है ना?

हमारा वर्तमान जावास्क्रिप्ट एप्लिकेशन वर्तमान में हमारे नए मॉड्यूल को true/false

नए रिटर्न मान के साथ उपयोग कर रहा है। हमारे उदाहरण के मामले में, हम सिर्फ document.write

का उपयोग करते हैं। यह कहने के लिए कि क्या हम सुपरमैन को नामों की सूची में पा सकते हैं या नहीं:

 var _ = require('underscore'), names = require('./names.js'), findSuperman = require('./findsuperman.js'); if (findSuperman(names())) { document.write('We found Superman'); } else { document.write('No Superman...'); }

हमें अब अपनी मुख्य फ़ाइल में अंडरस्कोर को शामिल करने की आवश्यकता नहीं है, इसलिए हम इस लाइन को सुरक्षित रूप से हटा सकते हैं, फिर भी इसे findsuperman.js

फ़ाइल के अंत में findsuperman.js

किया जाएगा।

Package.json के माध्यम से ब्राउज़र npm निर्भरता का प्रबंधन

मान लीजिए कि आपका कोई दोस्त है जो आपके कोड का उपयोग करना चाहता है। उससे यह उम्मीद करना बेवकूफी होगी कि वह कहीं से पता लगा लेगा कि आपके मॉड्यूल के काम करने के लिए उसे पहले अंडरस्कोर कनेक्ट करना होगा। इस समस्या को हल करने के लिए, हम अपने प्रोजेक्ट के रूट डायरेक्टरी में package.json

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

 { "name": "FindSuperman", "version": "0.0.1", "author": "Patrick Catanzariti", "description": "Code designed to find the elusive red blue blur", "dependencies": { "underscore": "1.6.x" }, "devDependencies": { "browserify": "latest" } }

निर्भरता की सूची वर्तमान में हमारे "underscore": "1.6.x"

तक सीमित है, जहां निर्भरता का पहला भाग नाम है और दूसरा संस्करण है। "lastest"

या "*"

आपको नवीनतम संस्करण प्राप्त करने की अनुमति देगा जो npm में है। इसके अलावा, आप संस्करण संख्या को 1.6

(निश्चित संख्या) या 1.6.

रूप में निर्दिष्ट कर सकते हैं ( 1.6.0

से 1.7

संस्करणों के लिए, समावेशी नहीं)।

हम ब्राउज़र को एक निर्भरता के रूप में भी जोड़ सकते हैं, लेकिन क्योंकि यह एक परियोजना को चलाने के लिए आवश्यक निर्भरता नहीं है - कोई भी उपयोगकर्ता findsuperman.js

को चलाने के बिना findsuperman.js

पा सकता है। लेकिन हम इसे एक devDependencies

रूप में प्लग करेंगे - मॉड्यूल डेवलपर्स को आवेदन का समर्थन करने की आवश्यकता है।

अब जब हमारे पास package.json

फ़ाइल है, तो हमें अपने मित्र को npm install underscore

चलाने के लिए मजबूर नहीं करना पड़ेगा। यह बस npm install

चला सकता है और सभी आवश्यक निर्भरताएं node_modules

निर्देशिका में स्थापित की node_modules

।

प्रक्रिया स्वचालन Browserify

browserify

कमांड को हर बार चलाना पूरी तरह से उबाऊ है, यह उल्लेख करने के लिए नहीं कि यह बेतहाशा असुविधाजनक है। सौभाग्य से, Browserify के साथ काम को स्वचालित करने के कई तरीके हैं।

NPM

npm स्वयं कंसोल स्क्रिप्ट चला सकता है जैसे कि आप उन्हें स्वयं टाइप कर रहे थे। ऐसा करने के लिए, बस package.json

में एक scripts

अनुभाग बनाएँ। यह निम्नानुसार किया जाता है:

 "scripts": { "build-js": "browserify js/main.js > js/findem.js" }

अब यह सब शुरू करने के लिए, आपको बस कमांड लाइन पर लिखना होगा:

 npm run build-js

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

अब हम इसे package.json

पर devDependencies

package.json

devDependencies

पर devDependencies

, और scripts

सेक्शन में एक अतिरिक्त लाइन लिखना न भूलें (यह पैकेट watchify

आवश्यकता नहीं होने पर सीधे हमारे watchify

मॉड्यूल को watchify

)।

 "devDependencies": { "browserify": "latest", "watchify": "latest" }, "scripts": { "build-js": "browserify js/main.js > js/findem.js", "watch-js": "watchify js/main.js -o js/findem.js" }

इसे शुरू करने के लिए, बस कमांड लिखें:

 npm run watch-js

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

ध्वज को अपनी निगरानी आदेश में जोड़ सकते हैं:

 "watch-js": "watchify js/main.js -o js/findem.js -v"

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

 121104 bytes written to js/findem.js (0.26 seconds) 121119 bytes written to js/findem.js (0.03 seconds)

Npm में स्रोत मानचित्र उत्पन्न करें

watchify

का उपयोग करके स्रोत मानचित्र बनाने के लिए, अपने watchify

बाद ऐड- -d

(या watchify

) watchify

:

 "scripts": { "build-js": "browserify js/main.js > js/findem.js -d", "watch-js": "watchify js/main.js -o js/findem.js -d" }

दोनों के लिए (डिबग के लिए एक, उत्पादन के लिए अन्य) फ़ाइलों के लिए, आपको कुछ इस तरह लिखना होगा:

 "watch-js": "watchify js/main.js -o js/findem.js -dv"

घुरघुराना

बहुत सारे लोग (स्वयं सहित) पहले से ही ग्रंट से परिचित हैं, और, सौभाग्य से, वे इसका उपयोग करना जारी रखते हैं। सौभाग्य से, क्योंकि Browserify इस बिल्ड सिस्टम के साथ बढ़िया काम करता है!

हमें वहां एक ग्रंट कनेक्शन निर्देश जोड़कर अपने package.json

को बदलना होगा। हम अब scripts

सेक्शन का उपयोग नहीं करेंगे, यह ग्रंट के कंधों पर शिफ्ट हो जाएगा:

 { "name": "FindSuperman", "version": "0.0.1", "author": "Patrick Catanzariti", "description": "Code designed to find the elusive red blue blur", "dependencies": { "underscore": "1.6.x" }, "devDependencies": { "browserify": "latest", "grunt": "~0.4.0", "grunt-browserify": "latest", "grunt-contrib-watch": "latest" } }

हमने sl जोड़ा। हमारी परियोजना में निर्भरताएँ:

ग्रंट - यह सुनिश्चित करने के लिए कि हमारे प्रोजेक्ट के लिए हमारे पास ग्रंट स्थापित है।

ग्रंट-ब्राउफीज़ एक मॉड्यूल है जो आपको अपने प्रोजेक्ट के अंदर ब्राउज़राइज़ का उपयोग करने की अनुमति देता है।

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

फिर हम Gruntfile.js

नामक एक फ़ाइल Gruntfile.js

और इसे परियोजना की जड़ में डालते हैं। इस Gruntfile.js

अंदर हमें निम्नलिखित लिखना होगा:

 module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-browserify'); grunt.registerTask('default', ['browserify', 'watch']); grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), browserify: { main: { src: 'js/main.js', dest: 'js/findem.js' } }, watch: { files: 'js/*', tasks: ['default'] } }); }

हमने अपनी ग्रंटफाइल को आवश्यक npm मॉड्यूल को लोड करके शुरू किया था जिसे हमने package.json

में प्लग किया था package.json

json:

 grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-browserify');

हम एक (और केवल) कार्य समूह को पंजीकृत करते हैं, जिसे डिफ़ॉल्ट रूप से लॉन्च किया जाएगा ( browserify

और watch

):

 grunt.registerTask('default', ['browserify', 'watch']);

अगला, हम initConfig

को initConfig

से कॉन्फ़िगर करेंगे:

 grunt.initConfig({

उसके बाद, हमें यह दिखाना होगा कि हमारा package.json

कहां है package.json

 pkg: grunt.file.readJSON('package.json'),

Browserify सेटिंग्स में, हम उस फ़ाइल को निर्दिष्ट करेंगे जिसका उपयोग हम स्रोत के रूप में करना चाहते हैं और फ़ाइल के ब्राउज़र किए गए संस्करण को कहां रखें:

 browserify: { main: { src: 'js/main.js', dest: 'js/findem.js' } }

अब हम oode> निर्देशिका में परिवर्तनों का पता लगाने के लिए एक watch

कार्य बनाएंगे:

 watch: { files: 'js/*', tasks: ['default'] }

हमारे नए विकास पर निर्भरता ( devDependencies

) के कारण, हमें npm install

devDependencies

npm install

चलाने की आवश्यकता है। आपको इस कमांड को केवल एक बार चलाना होगा, भविष्य में आप ग्रंट के लाभों का उपयोग करेंगे।

ग्रंट में सोर्स मैप्स बनाना

grunt-browserify

पैकेज के संस्करण 2.0.1 के साथ, स्रोत मानचित्र बनाने की प्रक्रिया थोड़ी बदल गई है। इंटरनेट गलत फैसलों के साथ था। अब, ग्रंट और ब्राउज़र को सही ढंग से बनाने के लिए स्रोत मानचित्र बनाएं, बस debug: true

जोड़ें debug: true

bundleOptions

debug: true

ध्वज:

 browserify: { main: { options: { bundleOptions: { debug: true } }, src: 'js/main.js', dest: 'js/findem.js' } }

यह कठिन-दिखने वाला समाधान हमें भविष्य में सरल और सुरुचिपूर्ण तरीके से Browserify करने के विकल्पों को पारित करने की अनुमति देगा।

घूंट

गुल्प <3 ब्राउज़र करें। गुपचुप के माध्यम से Browserify के साथ काम करने के बारे में लेख आईटी समुदायों में एक अत्यंत लोकप्रिय विषय है, और आश्चर्य की बात नहीं है: Browserify और Gulp वास्तव में, उन्नत वेब विकास स्टैक हैं। मैं यह नहीं कहना चाहता कि ब्राउज़रलाइज़ प्रशंसकों को गुलप का उपयोग करने की आवश्यकता है, बिल्कुल नहीं, यह पाठक की व्यक्तिगत प्राथमिकताओं में रहता है। जैसा कि ऊपर उल्लेख किया गया है, आप आसानी से npm या ग्रंट का उपयोग कर सकते हैं, लेकिन मैं व्यक्तिगत रूप से npm build

टीम के लिए छोटी परियोजनाओं के लिए अपनी प्राथमिकता देता हूं।

हमने जो कुछ भी गल्प के लिए ऊपर वर्णित किया था, उसे दोहराने के लिए, आपको पहले इसे (विश्व स्तर पर) स्थापित करना होगा:

 npm install -g gulp

हम अपने package.json

को संशोधित करेंगे। नई devDependencies

की जोड़ी को जोड़ने के लिए जो हमें चाहिए:

 "devDependencies": { "browserify": "latest", "watchify": "latest", "gulp": "3.7.0", "vinyl-source-stream": "latest" }

हमने निम्नलिखित जोड़े हैं:

घड़ी - हमने npm के साथ काम करते समय इसके काम का इस्तेमाल किया और इसका वर्णन किया

गल्प - कनेक्ट, वास्तव में, गल्प

विनाइल-सोर्स-स्ट्रीम - फाइलों को पढ़ने / लिखने के लिए वर्चुअल फाइल सिस्टम

Browserify में थ्रेड्स के साथ काम करने के लिए एक एपीआई है, इसलिए हम इसे सीधे गुल से उपयोग कर सकते हैं।

Browserify में सीधे तौर पर Gulp से स्ट्रीम के साथ काम करने के लिए API है। अधिकांश मार्गदर्शिकाएँ gulp-browserify

browserify प्लगइन का उपयोग करने की सलाह देती हैं, लेकिन Browserify खुद को इसके स्ट्रीमिंग एपीआई के माध्यम से काम करना पसंद करता है। ब्राउज़रलाइज़ आउटपुट प्राप्त करने और इसे एक फाइल में सहेजने के लिए हम vinyl-source-stream

का उपयोग करते हैं।

फिर हम अपने प्रोजेक्ट के मूल में gulpfile.js

फ़ाइल बनाते हैं। सभी गुल की कार्यक्षमता यहां पड़ेगी:

 var browserify = require('browserify'), watchify = require('watchify'), gulp = require('gulp'), source = require('vinyl-source-stream'), sourceFile = './js/main.js', destFolder = './js/', destFile = 'findem.js'; gulp.task('browserify', function() { return browserify(sourceFile) .bundle() .pipe(source(destFile)) .pipe(gulp.dest(destFolder)); }); gulp.task('watch', function() { var bundler = watchify(sourceFile); bundler.on('update', rebundle); function rebundle() { return bundler.bundle() .pipe(source(destFile)) .pipe(gulp.dest(destFolder)); } return rebundle(); });

 gulp.task('default', ['browserify', 'watch']);

हम अपने npm मॉड्यूल को परियोजना में आयात करके शुरू करते हैं। ऐसा लगता है कि सब कुछ स्पष्ट से अधिक स्पष्ट है - हम आगे बढ़ते हैं। अब हमें अपने निर्माण के लिए तीन चर बनाने होंगे:

sourceFile

- स्रोत का नाम और ब्राउज़र ब्राउज़र-फ़ाइल (हमारे मामले में js/main.js

)

destFolder

- अंतिम फ़ाइल स्थान

destFile

वह नाम है जिसे हम अपनी अंतिम फ़ाइल देना चाहते हैं

मैं निम्नलिखित कोड को और अधिक विस्तार से बताऊंगा:

कैसे ब्राउज़र के साथ काम करता है

हमारे gulpfile.js

में पहला कार्य " gulpfile.js

" है:

 gulp.task('browserify', function() {

यहाँ हम main.js

Browserify पैकेज में अपनी main.js

सोर्स फाइल पास करते हैं:

 return browserify(sourceFile)

तब हम अपने JS कंटेंट के साथ स्ट्रीम को वापस करने के लिए स्ट्रीमिंग Browserify API का उपयोग करते हैं:

 .bundle()

यहाँ हम स्ट्रीम से फाइल को findem.js

नामक फाइल में findem.js

और इसे js

डायरेक्टरी में सेव करते हैं।

 .pipe(source(destFile)) .pipe(gulp.dest(destFolder));

सीधे शब्दों में कहें, हमने अपनी आयातित फ़ाइल को कई चरणों के माध्यम से फेंक दिया, जिसने इसे हमारी परियोजना के लिए एक अंतिम फ़ाइल में बदल दिया। हुर्रे!

घड़ी और गुल का संयोजन

जैसा कि हम पहले ही समझ चुके हैं, Browserify का उपयोग करने से सीधे बहुत दर्द होता है (hehe, लगभग प्रति ) और पैकेज फाइल में से किसी एक के बदलने पर इसे अपने आप चलाना बहुत आसान हो जाता है। इस तरह की योजना को लागू करने के लिए, हम एक बार फिर से watchify

मॉड्यूल का उपयोग करेंगे।

हम एक पर्यवेक्षक नामक एक कार्य की स्थापना करके शुरू करते हैं:

 gulp.task('watch', function() {

हम पर्यवेक्षक को bundler

वैरिएबल प्रदान करते हैं (क्योंकि हम इसे दो बार उपयोग करेंगे):

 var bundler = watchify(sourceFile);

फिर हम एक इवेंट हैंडलर जोड़ते हैं जो हर बार update

इवेंट rebundle

जाने वाले rebundle

फ़ंक्शन को कॉल करेगा। सीधे शब्दों में कहें, जैसे ही पर्यवेक्षक देखता है कि फ़ाइल बदल रही है, वह rebundle()

चलाता है rebundle()

:

 bundler.on('update', rebundle);

तो क्या rebundle()

? यह बहुत कुछ हमारे ब्राउज़र कार्य के समान है:

 function rebundle() { return bundler.bundle() .pipe(source(destFile)) .pipe(gulp.dest(destFolder)); }; return rebundle(); });

- , browserify

watchify

, , . , gulpfile.js .

gulpfile.js

, ( , grunt).

 gulp.task('default', ['browserify', 'watch']);

, Gulp . « », :

 gulp

browserify

-, .

Browserify :

 gulp browserify

 gulp watch

गुल और ब्राउजर का उपयोग करके सोर्स मैप तैयार करें

अपने जावास्क्रिप्ट के लिए एक स्रोत मानचित्र उत्पन्न करने के लिए, { debug: true }

दोनों कार्यों में जोड़ें bundle()

।

हमारा browserify

कार्य निम्नलिखित जैसा कुछ होगा:

 gulp.task('browserify', function() { return browserify(sourceFile) .bundle({debug:true}) .pipe(source(destFile)) .pipe(gulp.dest(destFolder)); });

rebundle()

हमारे watch

कार्य में फ़ंक्शन इस तरह दिखेगा:

 function rebundle() { return bundler.bundle({debug:true}) .pipe(source(destFile)) .pipe(gulp.dest(destFolder)); }

निष्कर्ष

Browserify, , , . , JavaScript , Node . Node , npm . Browserify, , !

Browserify . , :

The Browserify Handbook – Browserify. , !
Gulp + Browserify: The Everything Post by Dan Tello – ,
And just like that Grunt and RequireJS are out, it's all about Gulp and Browserify now – Browserify Gulp, .
An introduction to Gulp.js – , Gulp .

Browserify के साथ शुरू हो रही है