Bagaimana cara mendapatkan hasil yang diperkecil dengan browserify?

Baru saja mulai menggunakan browserify , tetapi saya tidak dapat menemukan dokumentasi tentang cara membuatnya menumpahkan output yang diperkecil.

Jadi saya mencari sesuatu seperti:

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

Pipa itu melalui uglifyjs:

 browserify main.js | uglifyjs > bundle.js

Anda dapat menginstalnya menggunakan npm seperti:

 npm install -g uglify-js

Mulai 3.38.x Anda dapat menggunakan plugin minifyify saya untuk mengecilkan bundel Anda dan masih memiliki peta sumber yang dapat digunakan. Ini tidak mungkin dilakukan dengan solusi lain - yang terbaik yang dapat Anda lakukan adalah memetakan kembali ke bundel yang tidak dikompresi. Perkecil peta sepanjang jalan kembali ke file sumber Anda yang terpisah (ya, bahkan ke coffeescript!)

Atau gunakan transformasi uglifyify yang "memberi Anda manfaat dengan menerapkan transformasi" pemerasan "Uglify sebelum diproses oleh Browserify, yang berarti Anda dapat menghapus jalur kode mati untuk kebutuhan bersyarat."

Setelah menghabiskan beberapa jam menyelidiki bagaimana membangun proses pembangunan baru, saya pikir orang lain mungkin mendapat manfaat dari apa yang akhirnya saya lakukan. Saya menjawab pertanyaan lama ini karena tampaknya paling tinggi di Google.

Kasus penggunaan saya sedikit lebih terlibat daripada yang diminta OP. Saya memiliki tiga skenario pembuatan: pengembangan, pengujian, produksi. Karena sebagian besar pengembang profesional akan memiliki persyaratan yang sama, saya pikir itu bisa dimaafkan untuk melampaui cakupan pertanyaan awal.

Dalam pengembangan , saya menggunakan watchify untuk membuat bundel yang tidak terkompresi dengan peta sumber setiap kali file JavaScript berubah. Saya tidak ingin langkah uglify karena saya ingin build selesai sebelum saya beralih ke browser untuk menekan refresh dan itu tidak bermanfaat selama pengembangan. Untuk mencapai ini saya menggunakan:

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

Untuk pengujian , saya ingin kode yang sama persis dengan produksi (mis. Uglified) tetapi saya juga ingin peta sumber. Saya mencapai ini dengan:

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

Untuk produksi , kode dikompresi dengan uglify dan tidak ada peta sumber.

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

Catatan:

Saya telah menggunakan instruksi ini di Windows 7, MacOS High Sierra dan Ubuntu 16.04.

Saya telah berhenti menggunakan minifyify karena tidak lagi dipertahankan.

Mungkin ada cara yang lebih baik daripada yang saya bagikan. Saya telah membaca bahwa tampaknya mungkin untuk mendapatkan kompresi superior dengan melakukan uglifikasi semua file sumber sebelum menggabungkannya dengan browserify. Jika Anda memiliki lebih banyak waktu untuk dihabiskan daripada yang saya miliki, Anda mungkin ingin menyelidikinya.

Jika Anda belum menginstal watchify, uglify-js atau browserify, instal dengan npm sebagai berikut:

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

Jika Anda menginstal versi lama, saya sarankan Anda meningkatkan. Terutama uglify-js karena mereka membuat perubahan yang mengganggu pada argumen baris perintah yang membuat banyak informasi yang muncul di Google tidak valid.

Tidak perlu menggunakan plugin lagi untuk mengecilkan sembari mempertahankan peta sumber:

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

Saya suka terser yang memiliki dukungan untuk ES6 + dan beberapa comporession yang bagus juga.

browserify main.js | terser --compress --mangle > bundle.js

Instal secara global:

 npm i -g terser