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

सारांश

घूंट और ब्राउज़र का उपयोग करना - स्तर 0

Name: Agence Web Tremplin Numérique
Price range: $$$

उपयोग घूंट et ब्राउजरिफाइ काफी सरल है। आप Browserify API का उपयोग कर सकते हैं या सरलता से जा सकते हैं और gulp-browserify का उपयोग कर सकते हैं जो आपको अपनी फ़ाइलों को आसानी से संकलित करने की अनुमति देगा।

const घूंट = की आवश्यकता होती है(घूंट);
const ब्राउजराइज = की आवश्यकता होती है('गल्प-ब्राउज़रिफ़');
घूंट कार्य ('जेएस', समारोह() {
घूंट.src('src/*.js', { पढ़ना: असत्य })
.पाइप (ब्राउज़राइज़ ())
.पाइप (घूंट.डिस्ट ('।/निर्माण/'))
});

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

इससे पहले कि मैं आपको अंतिम समाधान दिखाऊं, यहां बताया गया है कि क्लासिक के साथ समाधान कैसा दिखेगा घूंट-घड़ी.

घूंट कार्य ("घड़ी", समारोह () {
गल्प.घड़ी ("./src/*.js"["जेएस"])।हम("परिवर्तन", समारोह(घटना) {
एक ढ़ांचा जिस में आंगन की स्वरकुंजियां आदि लगि है।लकड़ी का लट्ठा(फ़ाइल ${event.path} कर दिया गया है ${event.type}`);
});
});

इस समाधान के साथ, हर बार जब आप अपनी एक फाइल बदलते हैं, तो एक संपूर्ण संकलन शुरू हो जाता है।

देखो

देखो आपकी फ़ाइलों को संकलित करने के लिए इसे कुशल बनाता है ब्राउजरिफाइ. यह प्रत्येक फ़ाइल के संकलन के परिणाम को स्मृति में रखेगा (आपकी फ़ाइल से जुड़ी सभी फ़ाइलें जैसे निर्भरताएँ ...)

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

गल्प, ब्राउजराइज और वॉचिफाई का प्रयोग करें - स्तर ∞

Node.js निर्भरता स्थापित करना

आप उन्हें यार्न के साथ स्थापित कर सकते हैं (यदि आप वास्तव में अद्यतित हैं)!

1	$ यार्न ब्राउजराइज घूंट विनाइल-बफर विनाइल-सोर्स-स्ट्रीम वॉचिफाई -डेव जोड़ें

अन्यथा, आप अच्छे पुराने एनपीएम 🙉 का उपयोग कर रहे हैं

1	$ एनपीएम इंस्टॉल ब्राउजराइज गल्प विनाइल-बफर विनाइल-सोर्स-स्ट्रीम वॉचिफाई -सेव-देव

gulpfile.js

"सख्त उपयोग";
const ब्राउजराइज = की आवश्यकता होती है("ब्राउज़र"),
बफर = की आवश्यकता होती है("विनाइल बफर"),
घूंट = की आवश्यकता होती है("घूंट"),
पथ = की आवश्यकता होती है("पथ"),
स्रोत = की आवश्यकता होती है("विनाइल-स्रोत-धारा"),
उपयोगकर्ता = की आवश्यकता होती है("घूंट-उपयोग"),
देखना = की आवश्यकता होती है("देखो"),
स्रोत = {
js: "./src/main.js"
},
गंतव्य = {
js: "।/निर्माण/"
};
चलो बंडलर;
समारोह बंडल(प्रोफाइल) {
if (बंडल === undefiनेड) {
if (प्रोफाइल === "घड़ी") {
बंडलर = निगरानी (ब्राउज़र (src.js));
} अन्य {
बंडलर = ब्राउजराइज (src.js);
}
}
बंडल();
}
समारोह बंडल() {
चलो प्रारंभ = नई तारीख()।समय निकालो(),
_ = बंडलर
।बंडल()
।हम("त्रुटि", उपयोग.लॉग.बाइंड (उपयोगी, "ब्राउज़राइज़ त्रुटि"))
पाइप (स्रोत ("मुख्य.जेएस"))
पाइप (बफर ())
.पाइप (गल्प.डेस्ट (डेस्ट.जेएस)),
समय = नई तारीख().getTime () - प्रारंभ;
उपयोग लॉग ("[ब्राउज़रिफ़] रीबंडल लिया गया" , यूज़.कलर्स.सियान (`${समय} सुश्री'), उपयोग.रंग.ग्रे (`(${src.js})`));
वापसी _;
}
घूंट कार्य ("जेएस", बंडल.बाइंड (रिक्त));
घूंट कार्य ("घड़ी", समारोह () {
बंडल("घड़ी");
बंडलर.ऑन ("अपडेट करें", बंडल.बाइंड (रिक्त));
});
घूंट कार्य ("गलती करना"["घड़ी", "जेएस"]);

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

आपके कार्य को आसान बनाने के लिए, मैं आपको एक संग्रह प्रदान करता हूं जिसमें एक guplfile.js अधिक पूर्ण, जो फ़ाइल संकलन को संभालता है जावास्क्रिप्ट साथ कोलाहल (और कुछ इस presets ES2015 की तरह) लेकिन फ़ाइलें भी कम जैसे प्रोफाइल प्रबंधित करते समय Développement के साथ या के बिना घड़ी लेकिन यह भी उत्पादन न्यूनतमकरण के साथ!

निष्कर्ष

इसका उपयोग करना काफी संभव है ब्राउजरिफाइ के साथ प्रभावी ढंग से घूंट बशर्ते आप खेलें एपीआई (API) . यह आपको पीटा ट्रैक से थोड़ा दूर जाने और प्लगइन्स के बिना करने के लिए मजबूर करता है घूंट जिनका हम आमतौर पर उपयोग करते हैं।