Cách trình duyệt, biên dịch ES6 và rút gọn ứng dụng NodeJS

Question

Tôi đang cố gắng nắm bắt đồng thời với trình duyệt và ES6. Tôi có file Node cơ bản sau đây:

main.js

var foo = require('./foo.js'); 
var x = foo.math(200); 
console.log(x); 

foo.js

exports.math = (n)=>{ 
    return n * 111; 
}; 

Bây giờ tôi muốn làm như sau:

• Trình duyệt này thành một tập tin bundle.js vì vậy tôi có thể bao gồm nó như là một kịch bản trong trang web của tôi
• Biên dịch JS sử dụng babel để làm cho ES6 có thể đọc được bởi tất cả các trình duyệt
• Rút gọn bundle.js để cải thiện thời gian tải trong trình duyệt

Tôi đã browserify cài đặt trên toàn cầu và tôi chạy điều đó với lệnh này: browserify main.js > bundle.js

Hoạt động tốt. Nhưng tôi có nên chạy babel trước không? Làm cách nào để hoàn tất quy trình 3 bước của tôi và theo thứ tự nào (tất nhiên việc tối thiểu hóa sẽ phải xảy ra sau cùng)? Tôi có nên làm điều này tất cả với grunt?

Answer 1

Không cần thiết nữa để sử dụng nhân vật nhiệm vụ. Tuy nhiên, hãy sử dụng plugin gọn gàng như babelify từ dòng lệnh như được mô tả trong README.mdhere.

npm install --save-dev browserify babelify babel-preset-es2015 

browserify script.js -o bundle.js \ 
    -t [ babelify --presets es2015 ] 

Và thêm các biến đổi khác khi cần thiết từ here hoặc bất kỳ nơi nào khác, ví dụ: uglify.