2013-03-23 10 views
77

browserify'u kullanmaya başladım, ancak küçültülmüş çıktıyı nasıl çıkaracağına ilişkin belgeleri bulamıyorum.Browserify ile minified output nasıl alınır?

yüzden arıyorum gibi bir şey: uglifyjs aracılığıyla

$> browserify main.js > bundle.js --minified 
+8

Küçültme, tarayıcının kapsamı dışındadır, bir çıktının bir minik aracılıyla çalıştırılması gerekir. – generalhenry

cevap

108

Boru it:

npm install -g uglify-js 
+3

Grunt browserify/watchify göreviyle bunu nasıl yapabilirim? –

+1

Grunt kullanıyorsanız, bunu iki adımda yapmanızı tavsiye ederim. Önce browserify ile derleyin ve küçültün. Avantajı, kaynak haritaları ve her şeyi saran bir üretim yapısıyla bir geliştirme yapabilmenizdir. – topek

+0

Evet, ne yaptım bitti. Aslında 3 adımda, ara dosyayı temizlemelisiniz. Teşekkürler! –

15

Veya dönüşümü uglifyify kullanın:

browserify main.js | uglifyjs > bundle.js 

Öyle gibi UÖM'yi kullanarak yükleyebilir hangi "Browserfy tarafından işlenmeden önce Uglify'nin" sıkma "dönüşümünü uygulayarak size fayda sağlar şartlı gereksinimler için ölü kod yollarını kaldırabilirsiniz. "

+0

Yine de en iyi cevapta gösterilen uglify borusunun kullanılmasını gerektirir. Doktorlarının başında öyle diyorlar. –

21

3.38.x'ten itibaren paketinizi küçültmek için minifyify eklenti kullanabilir ve yine de kullanılabilir ek yığınları kullanabilirsiniz. Bu diğer çözümlerle mümkün değildir - yapabileceğiniz en iyi şey sıkıştırılmamış pakete geri dönüş. Minifyify sizin ayrı kaynak dosyaları (! Evet, hatta CoffeeScript için) tüm yolu geri eşler

+1

Sürüm 9'a göz atmayı desteklediğini söylüyor. Browserify şu anda 11.0.1'de. Bunu destekleyecek mi? – cchamberlain

+0

[uglifyify] (https://github.com/hughsk/uglifyify) benim için iyi bir yedek olarak çalışıyor gibi görünüyor –

3

bir kaynak haritası koruyarak küçültmek için artık eklenti kullanmasına gerek yok: araştıran birkaç saat geçirdikten sonra

browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js 
3

Yeni inşa süreçlerini nasıl inşa edeceğimi, diğerlerinin yaptığım şeyden fayda sağlayacağını düşündüm. Bu eski soruya Google’da yüksek göründüğü için cevap veriyorum.

Kullanım durumum, OP'den istenen durumdan biraz daha fazlasını içeriyor. Üç yapı senaryom var: geliştirme, test etme, üretim. Çoğu profesyonel geliştiricinin aynı gerekliliklere sahip olacağından, asıl sorunun kapsamını aşmanın mazur olduğunu düşünüyorum.

numaralı geliştirmede, bir JavaScript dosyası değiştiğinde kaynak harita ile sıkıştırılmamış bir paket oluşturmak için izleme özelliğini kullanıyorum. Yenileme adımını istemiyorum, çünkü tarayıcıyı yenilemek için tarayıcımın alt kısmına geçmeden önce yapının bitmesini istemiyorum ve geliştirme sırasında hiçbir faydası yok. test için

watchify app/index.js --debug -o app/bundle.js -v 

, I üretiminin (örneğin, uglified) ile tam olarak aynı kod istiyorum ama aynı zamanda bir kaynak ilk istiyorum: Bu amaca ulaşmak için kullanmak. üretim için

browserify app/index.js -d | uglifyjs -cm -o app/bundle.js  --source-map "content=inline,filename='bundle.js',url='bundle.js.map'" 

, kod çirkinleştirmek ile sıkıştırılır ve hiçbir kaynak haritası vardır: Birlikte Bunu başarmak.

browserify app/index.js | uglifyjs -cm > app/bundle.js 

Notlar:

Ben Windows 7 bu talimatları kullandık, MacOS High Sierra ve Ubuntu 16.04.

Artık bakım yapılmadığından küçültmeyi kullanmayı bıraktım.

Paylaştığımdan daha iyi yollar olabilir. Okumak, tarayıcı kaynaklarıyla birleştirmeden önce tüm kaynak dosyaları ugglifying tarafından üstün sıkıştırma elde etmek mümkündür.Sahip olduğumdan daha fazla zaman harcamanız varsa, bunu araştırmak isteyebilirsiniz.

Eğer watchify var çirkinleştirmek-js veya zaten yüklü browserify, böylece NPM ile yüklediği yoksa: Eğer eski sürümleri yüklüyse

npm install -g browserify 
npm install -g watchify 
npm install -g uglify-js 

Sana geçmelerini öneririz. Özellikle uglify-js, Google’da ortaya çıkan pek çok bilgiyi geçersiz kılan komut satırı argümanlarında bir değişiklik yaptı.

İlgili konular