बस ब्राउजर का उपयोग करना शुरू कर दिया है , लेकिन मुझे यह पता लगाने के लिए दस्तावेज़ीकरण नहीं मिल सकता है कि इसे मिनिफ़ाइज्ड आउटपुट कैसे दिया जाए।
तो मैं कुछ इस तरह देख रहा हूँ:
$> browserify main.js > bundle.js --minified
बस ब्राउजर का उपयोग करना शुरू कर दिया है , लेकिन मुझे यह पता लगाने के लिए दस्तावेज़ीकरण नहीं मिल सकता है कि इसे मिनिफ़ाइज्ड आउटपुट कैसे दिया जाए।
तो मैं कुछ इस तरह देख रहा हूँ:
$> browserify main.js > bundle.js --minified
जवाबों:
इसे uglifyjs के माध्यम से पाइप करें:
browserify main.js | uglifyjs > bundle.js
आप इसे npm का उपयोग करके स्थापित कर सकते हैं:
npm install -g uglify-js
3.38.x के रूप में आप अपने बंडल को छोटा करने के लिए मेरे मिनीफाईइज़ प्लगइन का उपयोग कर सकते हैं और अभी भी प्रयोग करने योग्य सोर्समैप हैं। यह अन्य समाधानों के साथ संभव नहीं है - आप जो सबसे अच्छा कर सकते हैं वह असम्पीडित बंडल में वापस मैप करता है। अपने अलग-अलग स्रोत फ़ाइलों के लिए सभी तरह से मानचित्रों को छोटा करें (हाँ, यहां तक कि कॉफ़ीस्क्रिप्ट के लिए भी!)
या ब्राउजलाइज़ द्वारा संसाधित करने से पहले उगलिज़ के "निचोड़" परिवर्तन को लागू करने वाले लाभ का उपयोग करें, जिससे आप सशर्त आवश्यकता के लिए मृत कोड पथ निकाल सकते हैं। "
नई बिल्ड प्रक्रियाओं का निर्माण करने के तरीके की जांच करने में कुछ घंटे बिताने के बाद, मैंने सोचा कि जो मैं कर रहा था उससे दूसरों को फायदा हो सकता है। मैं इस पुराने प्रश्न का उत्तर दे रहा हूं क्योंकि यह Google में उच्च प्रतीत होता है।
मेरा उपयोग मामला ओपी द्वारा पूछे जाने की तुलना में थोड़ा अधिक शामिल है। मेरे पास तीन बिल्ड परिदृश्य हैं: विकास, परीक्षण, उत्पादन। जैसा कि अधिकांश पेशेवर डेवलपर्स की समान आवश्यकताएं होंगी, मुझे लगता है कि मूल प्रश्न के दायरे से परे जाना उचित है।
विकास में , मैं जब भी जावास्क्रिप्ट फ़ाइल बदलता है, तो स्रोत मानचित्र के साथ एक असम्पीडित बंडल बनाने के लिए घड़ी का उपयोग करता हूं। मैं बदसूरत कदम नहीं चाहता, क्योंकि मैं चाहता हूं कि निर्माण खत्म होने से पहले मैं ब्राउज़र को ताज़ा करने के लिए ऑल्ट-टैबेड हूं और वैसे भी विकास के दौरान इसका कोई फायदा नहीं है। इसे प्राप्त करने के लिए मैं उपयोग करता हूं:
watchify app/index.js --debug -o app/bundle.js -v
परीक्षण के लिए , मैं उत्पादन के समान सटीक कोड चाहता हूं (उदाहरण के लिए कुरूप) लेकिन मुझे स्रोत मानचित्र भी चाहिए। मैं इसे हासिल करता हूं:
browserify app/index.js -d | uglifyjs -cm -o app/bundle.js --source-map "content=inline,filename='bundle.js',url='bundle.js.map'"
उत्पादन के लिए , कोड बदसूरत के साथ संकुचित है और कोई स्रोत नक्शा नहीं है।
browserify app/index.js | uglifyjs -cm > app/bundle.js
टिप्पणियाँ:
मैंने विंडोज 7, मैकओएस हाई सिएरा और उबंटू 16.04 पर इन निर्देशों का उपयोग किया है।
मैंने minifyify का उपयोग करना बंद कर दिया है क्योंकि अब इसे बनाए नहीं रखा गया है।
शायद इससे बेहतर तरीके हैं कि मैं क्या साझा कर रहा हूं। मैंने पढ़ा है कि ब्राउज़र के साथ संयोजन करने से पहले सभी स्रोत फ़ाइलों को कुरूप करके बेहतर संपीड़न प्राप्त करना संभव है। यदि आपके पास उस पर खर्च करने के लिए अधिक समय है, तो आप उसकी जांच कर सकते हैं।
यदि आपके पास पहले से इंस्टॉल किए गए वॉच, कुरूप-जेएस या ब्राउज़राइज़ नहीं हैं, तो उन्हें एनपीएम के साथ स्थापित करें:
npm install -g browserify
npm install -g watchify
npm install -g uglify-js
यदि आपके पास पुराने संस्करण स्थापित हैं, तो मैं आपको अपग्रेड करने की सलाह देता हूं। विशेष रूप से बदसूरत-जेएस के रूप में उन्होंने कमांड लाइन के तर्कों को तोड़ने वाला परिवर्तन किया जो Google में आने वाली बहुत सारी जानकारी को अमान्य करता है।
स्रोत मानचित्र को संरक्षित करते समय छोटा करने के लिए अब प्लगइन्स का उपयोग करने की आवश्यकता नहीं है:
browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js
मुझे terser पसंद है जिसके पास ES6 + के लिए समर्थन है और साथ ही कुछ अच्छे कॉम्पोज़िशन भी।
browserify main.js | terser --compress --mangle > bundle.js
ग्लोबली स्थापित करें:
npm i -g terser