Chỉ mới bắt đầu sử dụng Browserify , nhưng tôi không thể tìm thấy tài liệu về cách làm cho nó tràn ra đầu ra được rút gọn.
Vì vậy, tôi đang tìm một cái gì đó như:
$> browserify main.js > bundle.js --minified
Chỉ mới bắt đầu sử dụng Browserify , nhưng tôi không thể tìm thấy tài liệu về cách làm cho nó tràn ra đầu ra được rút gọn.
Vì vậy, tôi đang tìm một cái gì đó như:
$> browserify main.js > bundle.js --minified
Câu trả lời:
Đưa nó qua uglifyjs:
browserify main.js | uglifyjs > bundle.js
Bạn có thể cài đặt nó bằng npm như sau:
npm install -g uglify-js
Kể từ 3.38.x, bạn có thể sử dụng plugin minifyify của tôi để thu nhỏ gói của bạn và vẫn có các bản đồ nguồn có thể sử dụng. Điều này là không thể với các giải pháp khác - tốt nhất bạn có thể làm là ánh xạ trở lại gói không nén. Thu nhỏ bản đồ tất cả các cách quay trở lại các tệp nguồn riêng biệt của bạn (có, ngay cả với coffeescript!)
Hoặc sử dụng chuyển đổi uglifyify "mang lại cho bạn lợi ích khi áp dụng biến đổi" bóp "của Uglify trước khi được Browserify xử lý, nghĩa là bạn có thể xóa các đường dẫn mã chết đối với các yêu cầu có điều kiện."
Sau khi dành vài giờ để tìm hiểu cách xây dựng các quy trình xây dựng mới, tôi nghĩ rằng những người khác có thể hưởng lợi từ những gì tôi đã làm. Tôi đang trả lời câu hỏi cũ này vì nó xuất hiện cao trên Google.
Trường hợp sử dụng của tôi có liên quan nhiều hơn một chút so với OP yêu cầu. Tôi có ba kịch bản xây dựng: phát triển, thử nghiệm, sản xuất. Vì hầu hết các nhà phát triển chuyên nghiệp sẽ có các yêu cầu giống nhau, tôi nghĩ rằng có thể vượt ra ngoài phạm vi của câu hỏi ban đầu.
Trong quá trình phát triển , tôi sử dụng watchify để tạo một gói không nén với bản đồ nguồn bất cứ khi nào tệp JavaScript thay đổi. Tôi không muốn bước xấu xí vì tôi muốn quá trình xây dựng hoàn thành trước khi tôi gắn thẻ thay thế vào trình duyệt để nhấn làm mới và dù sao thì nó cũng không mang lại lợi ích gì trong quá trình phát triển. Để đạt được điều này, tôi sử dụng:
watchify app/index.js --debug -o app/bundle.js -v
Để thử nghiệm , tôi muốn mã chính xác giống như sản xuất (ví dụ: chưa được xác minh) nhưng tôi cũng muốn có một bản đồ nguồn. Tôi đạt được điều này với:
browserify app/index.js -d | uglifyjs -cm -o app/bundle.js --source-map "content=inline,filename='bundle.js',url='bundle.js.map'"
Đối với sản xuất , mã được nén bằng uglify và không có bản đồ nguồn.
browserify app/index.js | uglifyjs -cm > app/bundle.js
Ghi chú:
Tôi đã sử dụng các hướng dẫn này trên Windows 7, MacOS High Sierra và Ubuntu 16.04.
Tôi đã ngừng sử dụng minifyify vì nó không còn được duy trì.
Có thể có những cách tốt hơn những gì tôi đang chia sẻ. Tôi đã đọc, rõ ràng là có thể có được khả năng nén vượt trội bằng cách xác định tất cả các tệp nguồn trước khi kết hợp với Browserify. Nếu bạn có nhiều thời gian để dành cho nó hơn tôi có, bạn có thể muốn điều tra điều đó.
Nếu bạn chưa cài đặt watchify, uglify-js hoặc Browserify, hãy cài đặt chúng bằng npm do đó:
npm install -g browserify
npm install -g watchify
npm install -g uglify-js
Nếu bạn đã cài đặt các phiên bản cũ, tôi khuyên bạn nên nâng cấp. Đặc biệt uglify-js khi họ thực hiện một thay đổi đột ngột đối với các đối số dòng lệnh, làm mất hiệu lực nhiều thông tin xuất hiện trong Google.
Không cần phải sử dụng các plugin nữa để thu nhỏ trong khi duy trì bản đồ nguồn:
browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js
Tôi thích terser có hỗ trợ cho ES6 + và một số tính năng nén tốt.
browserify main.js | terser --compress --mangle > bundle.js
Cài đặt Globallly:
npm i -g terser