Browsererify kullanmaya yeni başladım , ancak küçültülmüş çıktıyı nasıl dağıtacağıma dair belgeleri bulamıyorum.
Bu yüzden şöyle bir şeye bakıyorum:
$> browserify main.js > bundle.js --minified
Browsererify kullanmaya yeni başladım , ancak küçültülmüş çıktıyı nasıl dağıtacağıma dair belgeleri bulamıyorum.
Bu yüzden şöyle bir şeye bakıyorum:
$> browserify main.js > bundle.js --minified
Yanıtlar:
Uglifyjs aracılığıyla aktarın:
browserify main.js | uglifyjs > bundle.js
Bunu aşağıdaki gibi npm kullanarak kurabilirsiniz:
npm install -g uglify-js
3.38.x itibariyle benim kullanabilirsiniz minifyify Paketinizi küçültmek için eklenti ve hala kullanılabilir sourcemaps var. Bu diğer çözümlerle mümkün değildir - yapabileceğiniz en iyi şey, sıkıştırılmamış pakete geri dönmektir. Haritaları ayrı kaynak dosyalarınıza kadar küçültün (evet, kahve yazısına bile!)
Veya "size Uglify'nin" sıkıştırma "dönüşümünü Browserify tarafından işlenmeden önce uygulama avantajı sağlayan uglifyify dönüşümünü kullanın , yani koşullu gereksinimler için ölü kod yollarını kaldırabilirsiniz."
Yeni inşa süreçlerinin nasıl inşa edileceğini araştırmak için birkaç saat harcadıktan sonra, başkalarının benim yaptığım şeyden faydalanabileceğini düşündüm. Google'da üst sıralarda göründüğü için bu eski soruyu yanıtlıyorum.
Kullanım durumum, OP'nin istediğinden biraz daha karmaşık. Üç yapı senaryom var: geliştirme, test etme, üretim. Profesyonel geliştiricilerin çoğu aynı gereksinimlere sahip olacağından, orijinal sorunun kapsamının ötesine geçmenin mazur görüleceğini düşünüyorum.
Geliştirme aşamasında , bir JavaScript dosyası her değiştiğinde kaynak haritayla sıkıştırılmamış bir paket oluşturmak için watchify kullanıyorum. Çirkinleştirme adımını istemiyorum çünkü tarayıcıya alt sekme atıp yenile tuşuna basmadan önce yapının bitmesini istiyorum ve yine de geliştirme sırasında herhangi bir faydası yok. Bunu başarmak için kullanıyorum:
watchify app/index.js --debug -o app/bundle.js -v
Test için , üretimle aynı kodu (örneğin çirkinleştirilmiş) istiyorum ama aynı zamanda bir kaynak haritası da istiyorum. Bunu şununla başarıyorum:
browserify app/index.js -d | uglifyjs -cm -o app/bundle.js --source-map "content=inline,filename='bundle.js',url='bundle.js.map'"
Üretim için kod çirkinleştirilerek sıkıştırılır ve kaynak haritası yoktur.
browserify app/index.js | uglifyjs -cm > app/bundle.js
Notlar:
Bu talimatları Windows 7, MacOS High Sierra ve Ubuntu 16.04'te kullandım.
Artık bakım yapılmadığı için minifyify kullanmayı bıraktım.
Paylaştığımdan daha iyi yollar olabilir. Tarayıcı ile birleştirmeden önce tüm kaynak dosyaları çirkinleştirerek üstün sıkıştırma elde etmenin mümkün olduğunu okudum. Benden daha fazla harcayacak vaktin varsa, bunu araştırmak isteyebilirsin.
Halihazırda watchify, uglify-js veya browsererify kurulu değilse, bunları npm ile kurun:
npm install -g browserify
npm install -g watchify
npm install -g uglify-js
Yüklü eski sürümleriniz varsa, yükseltmenizi tavsiye ederim. Özellikle uglify-js, Google'da ortaya çıkan pek çok bilgiyi geçersiz kılan komut satırı argümanlarında son derece önemli bir değişiklik yaptılar.
Ben gibi terser ES6 + ve bazı iyi comporession desteği de vardır.
browserify main.js | terser --compress --mangle > bundle.js
Global olarak yükleyin:
npm i -g terser