Có gì mới trong Babel 7?
Biên dịch: Nguyễn Quốc Đại Đôi nét về Babel Babel là trình chuyển đổi cho JavaScript phổ biến giữa các nhà phát triển vì khả năng biến ES6 hoặc ES7 thành code có thể chạy trên trình duyệt và thiết bị của bạn. Điều này rất quan trọng vì hầu hết các thiết bị và trình duyệt vẫn ...
Biên dịch: Nguyễn Quốc Đại
Đôi nét về Babel
Babel là trình chuyển đổi cho JavaScript phổ biến giữa các nhà phát triển vì khả năng biến ES6 hoặc ES7 thành code có thể chạy trên trình duyệt và thiết bị của bạn.
Điều này rất quan trọng vì hầu hết các thiết bị và trình duyệt vẫn hỗ trợ các chuẩn cũ hơn được thiết lập tốt như ES5. Vì vậy, các nhà phát triển có thể viết code của họ trong các công ước mới nhất và không phải lo lắng về các lỗi do không tương thích.
Ví dụ: nếu bạn viết code JavaScript sau (theo tiêu chuẩn ES6):
|
1 2 3 4 |
const numbers = [ 5, 10, 15]; console.log(numbers.map(number => number + 5)); // [10, 15, 20] |
Babel sẽ biên dịch nó thành:
|
1 2 3 4 5 6 |
var numbers = [ 5, 10, 15]; console.log(numbers.map(function (number) { return number + 5; })); // |
Đây là một điểm cộng khác về việc sử dụng Babel. Bạn là nhà phát triển có thể viết code của bạn trong ES6 hoặc ES7, như chúng ta có thể thấy ở trên, đoạn code ngắn gọn, đơn giản hơn. Babel sẽ biên dịch code của chúng tôi sang mã JavaScript của chúng tôi để code tương thích với trình duyệt.
Để thêm lời khen ngợi cho Babel, nó là tương thích nhất của tất cả các transpilers ES6, vượt xa các transpilers khác như Traceur của Google.
Giờ đến Babel 7!
Babel 6 được phát hành vào năm 2015. Kể từ đó, nó đã trải qua hơn 4000 cam kết và 50 lần phát hành trước. Giờ đây, những người ở Babel đã mang đến cho chúng tôi bản cập nhật lớn tiếp theo: Babel 7.
Babel giờ đây nhanh hơn và đi kèm với công cụ nâng cấp, cấu hình JavaScript, ghi đè cấu hình, tùy chọn giảm kích thước, hỗ trợ cho Phân đoạn JSX của React và quan trọng hơn là … hỗ trợ cho TypeScript! Trong bài này, tôi sẽ giới thiệu một số bản cập nhật và tính năng chính của Babel 7.
babel-upgrade
Như đã đề cập trước đây, Babel 7 đi kèm với một công cụ nâng cấp mới được gọi là babel-upgrade. Công cụ này sẽ tự động thực hiện bất kỳ thay đổi nâng cấp nào trong tệp package.json và tệp .babelrc.
Để sử dụng công cụ này, bạn có thể chạy nó trực tiếp trên kho lưu trữ GitHub:
|
1 2 3 |
$ npx babel-upgrade |
Hoặc bạn có thể cài đặt nó bằng NPM / Yarn:
|
1 2 3 |
$ npm i babel-upgrade -g |
JavaScript Configuration Files
Babel 7 giới thiệu một tập tin mới: babel.config.js. Xin lưu ý rằng tệp này không phải là thay thế cho .babelrc. Nó chỉ đơn giản là một bổ sung tuyệt vời có thể hữu ích cho một số trường hợp sử dụng nhất định.
Bạn có muốn lập trình cấu hình cho dự án của mình không? Hay bạn muốn biên dịch dự án node_modules của bạn? Khi đó, file babel.config.js là tệp hoàn hảo cho bạn!
Dưới đây là ví dụ về tệp babel.config.js và loại mã bạn có thể thêm vào bên trong:
|
1 2 3 4 5 6 7 8 9 10 11 |
module.exports = function () { const presets = [ ... ]; const plugins = [ ... ]; return { presets, plugins }; } |
File .babelrc mặt khác, là nhiều hơn một tập tin JSON thay vì một tập tin JS:
|
1 2 3 4 5 6 |
{ "presets": [...], "plugins": [...] } |
Bằng cách thêm một file babel.config.js, Babel sẽ dễ dàng giải quyết việc cấu hình thay vì tra cứu từ mỗi tệp cho đến khi tìm thấy mã cấu hình. Điều này cũng cho phép chúng ta dễ dàng thực hiện ghi đè.
Overrides
Ghi đè trong Babel sẽ cho phép bạn chỉ định các cấu hình khác nhau trên mỗi glob. Vì vậy, nếu dự án JavaScript của bạn yêu cầu các cấu hình biên dịch khác nhau cho các tệp thử nghiệm, mã máy khách và mã máy chủ, chúng tôi sẽ không phải tạo một file .babelrc riêng biệt cho mỗi tệp. Thay vào đó, chúng ta có thể làm như thế này:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
module.exports = { presets: [ // default config... ], overrides: [ { test: ["./node_modules"], presets: [ // config for node_modules ], }, { test: ["./tests"], presets: [ // config for tests ], } ] }; |
Speed
Babel 7 đi kèm với rất nhiều thay đổi cho phép chúng tôi tạo các bản dựng nhanh hơn bao giờ hết!
Output Options
Trong Babel, bạn có thể bọc các plugin trong một mảng và truyền một đối tượng options vào nó như ví dụ dưới đây:
|
1 2 3 4 5 6 7 8 9 10 |
{ "plugins": [ ["transform-async-to-module-method", { "module": "bluebird", "method": "coroutine" }] ] } |
Babel 7 đã thực hiện một vài thay đổi đối với các tùy chọn như loose plugin và thêm một vài tùy chọn mới cho các plugin khác.
“Pure” Annotation
Bây giờ, khi Babel transpiles một lớp ES6, nó chú thích lớp transpiled với một /*#_PURE_*/ chú thích. Điều này nói với các bộ phận khai thác như Uglify về một cái gì đó được gọi là Dead Code Elimination.
|
1 2 3 4 5 6 7 |
var C = /*#_PURE_*/ function () { // code }(); |
