เพิ่งเริ่มใช้browserifyแต่ฉันไม่พบเอกสารเกี่ยวกับวิธีทำให้มันล้นออกมา
ดังนั้นฉันกำลังมองหาบางอย่างเช่น:
$> browserify main.js > bundle.js --minified
คำตอบ:
บีบผ่าน uglifyjs:
browserify main.js | uglifyjs > bundle.js
คุณสามารถติดตั้งโดยใช้ npm ดังนี้:
npm install -g uglify-js
ตั้งแต่ 3.38.x คุณสามารถใช้ปลั๊กอินminifyifyของฉันเพื่อลดขนาดบันเดิลของคุณและยังมีซอร์สแมปที่ใช้งานได้ วิธีนี้ใช้ไม่ได้กับโซลูชันอื่นสิ่งที่ดีที่สุดที่คุณทำได้คือแมปกลับไปยังบันเดิลที่ไม่บีบอัด ลดขนาดแผนที่ให้เล็กลงจนสุดกลับไปยังไฟล์ต้นทางที่แยกจากกันของคุณ (ใช่แม้กระทั่งการเขียนกาแฟ!)
หรือใช้การแปลงuglifyifyซึ่ง "ให้ประโยชน์แก่คุณในการใช้การแปลงแบบ" บีบ "ของ Uglify ก่อนที่จะประมวลผลโดย Browserify ซึ่งหมายความว่าคุณสามารถลบเส้นทางรหัสที่ตายแล้วสำหรับความต้องการตามเงื่อนไข"
หลังจากใช้เวลาไม่กี่ชั่วโมงในการตรวจสอบวิธีสร้างกระบวนการสร้างใหม่ฉันคิดว่าคนอื่นอาจได้รับประโยชน์จากสิ่งที่ฉันทำ ฉันกำลังตอบคำถามเก่านี้ซึ่งดูเหมือนจะเป็นที่นิยมใน Google
กรณีการใช้งานของฉันเกี่ยวข้องมากกว่าที่ OP ขอเล็กน้อย ฉันมีสถานการณ์การสร้างสามแบบ: การพัฒนาการทดสอบการผลิต เนื่องจากนักพัฒนามืออาชีพส่วนใหญ่จะมีข้อกำหนดเหมือนกันฉันคิดว่ามันเป็นเรื่องยากที่จะทำเกินขอบเขตของคำถามเดิม
ในการพัฒนาฉันใช้ watchify เพื่อสร้างบันเดิลที่ไม่มีการบีบอัดพร้อมแผนที่ต้นทางเมื่อใดก็ตามที่ไฟล์ JavaScript เปลี่ยนแปลง ฉันไม่ต้องการขั้นตอนอัปลักษณ์เนื่องจากฉันต้องการให้การสร้างเสร็จสิ้นก่อนที่ฉันจะแท็บ alt ไปที่เบราว์เซอร์เพื่อกดรีเฟรชและมันก็ไม่ได้ประโยชน์ใด ๆ ในระหว่างการพัฒนา เพื่อให้บรรลุสิ่งนี้ฉันใช้:
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'"
สำหรับการใช้งานจริงโค้ดจะถูกบีบอัดด้วย uglify และไม่มีแผนที่ต้นทาง
browserify app/index.js | uglifyjs -cm > app/bundle.js
หมายเหตุ:
ฉันใช้คำแนะนำเหล่านี้กับ Windows 7, MacOS High Sierra และ Ubuntu 16.04
ฉันหยุดใช้ minifyify แล้วเพราะไม่มีการบำรุงรักษาอีกต่อไป
อาจมีวิธีที่ดีกว่าสิ่งที่ฉันแบ่งปัน ฉันได้อ่านแล้วเห็นได้ชัดว่าเป็นไปได้ที่จะได้รับการบีบอัดที่เหนือกว่าโดยการอัปลักษณ์ไฟล์ต้นฉบับทั้งหมดก่อนที่จะรวมกับ browserify หากคุณมีเวลาใช้จ่ายกับมันมากกว่าที่ฉันมีคุณอาจต้องการตรวจสอบสิ่งนั้น
หากคุณไม่ได้ติดตั้ง watchify, uglify-js หรือ browserify ให้ติดตั้งด้วย npm ดังนี้:
npm install -g browserify
npm install -g watchify
npm install -g uglify-js
หากคุณติดตั้งเวอร์ชันเก่าแล้วฉันขอแนะนำให้คุณอัปเกรด โดยเฉพาะอย่างยิ่ง 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