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 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):

const numbers = [ 5, 10, 15];
console.log(numbers.map(number => number + 5)); // [10, 15, 20]

Babel sẽ biên dịch nó thành:

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:

$ npx babel-upgrade

Hoặc bạn có thể cài đặt nó bằng NPM / Yarn:

$ 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:

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:

{   
  "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:

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:

{   
  "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.

var C =
  /*#_PURE_*/
  function () {
    // code 
}();

Support for TypeScript! 🙌

Với sự giúp đỡ từ những người ở TypeScript, Babel giờ đây có thể phân tích cú pháp TypeScript bằng cách sử dụng một gói mới có tên @babel/preset-typescript.

Vì vậy, nếu bạn sử dụng TypeScript để viết một ứng dụng như thế này:

interface Hero {
  name: string;
}
function Heroes(hero: Hero) {
  return "I am " + hero.name;
}

Babel sẽ chuyển nó thành:

function Heroes(hero) {
  return "I am " + hero.name;
}

JSX Pragment

React 16 đã cung cấp cùng với Fragment, giúp chúng ta trả về nhiều con từ phương thức render của component mà không cần phải sử dụng một div làm parent.

render() {   
  return (     
    <>       
      <li>Aquaman</li>
      <li>The Flash</li>
      <li>Wonder Woman</li>     
    </>   
  ); 
}

Babel 7 cũng hỗ trợ tính năng tuyệt vời này:

render() {
  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      "li",
      null,
      "Aquaman"
    ),
    React.createElement(
      "li",
      null,
      "The Flash"
    ),
    React.createElement(
      "li",
      null,
      "Wonder Woman"
    )
  )
}

Automatic Polyfilling

Các polyfills rất quan trọng trong JavaScript vì chúng cho phép chúng ta sử dụng các tính năng khác như Promises và Symbols trong các môi trường thậm chí không hỗ trợ chúng. Bằng cách này, Babel có thể làm nhiều hơn là chỉ thay đổi cú pháp của mã của chúng tôi. Nó có thể thực hiện các hàm và đối tượng dựng sẵn.

Macros

Babel lúc đầu chỉ là một trình chuyển đổi mã ES6 thành ES5. Nhưng hiện nay, nó còn hơn thế nữa. Có hàng trăm plugin có thể được sử dụng cho các thư viện cụ thể và các trường hợp sử dụng để cải thiện hiệu suất tổng thể của ứng dụng của chúng ta.

Nhưng việc thêm các plugin này vào ứng dụng của chúng ta là một nhiệm vụ không đơn giản. Ví dụ: nếu bạn đã tạo Ứng dụng React bằng công cụ create-react-app thì bạn sẽ không thể sử dụng các plugin này. Ngoài ra, bạn là nhà phát triển sẽ phải biết mọi thứ về plugin và cách nó sẽ thay đổi mã ứng dụng của bạn khi bạn build ứng dụng.

Một giải pháp nhanh cho việc này là cài đặt gói babel-plugin-macros trong ứng dụng của bạn. Gói này không chỉ giúp việc cấu hình mã của bạn thành plugin tương thích, nó còn giúp dễ dàng viết các biến đổi tùy chỉnh cho các tình huống cụ thể cho ứng dụng của bạn.

Caller Metadata

Các gói phần mềm @babel/core cũng có một tùy chọn mới được gọi là caller sẽ cho phép chuyển bất kỳ siêu dữ liệu đến các giá trị đặt trước và plugin của chúng tôi .

babel.transform("code;", {   
  filename,   
  presets: ["@babel/preset-env"],   
  caller: {     
    name: "babel-loader",     
    supportsStaticESM: true,   
  }, 
});

Bằng cách này, Babel đã tạo ra một phương pháp mới cho công cụ để cung cấp cho chúng tôi nhiều cấu hình mặc định hơn cho ít cấu hình hơn.

Phần kết luận

Nếu bạn đang băn khoăn tại sao bản cập nhật mới của Babel lại là một bản phân phối lớn, hãy nghĩ rằng ngày nay có hơn 1 triệu kho lưu trữ trên GitHub tùy thuộc vào babel-core. Framework và thư viện như React và Vue và các công ty khổng lồ như Netflix và Facebook sử dụng Babel trong các dự án của họ.

Tôi hy vọng sẽ thấy nhiều cập nhật tuyệt vời hơn từ nhóm tại Babel. Đó là các tính năng mới như hỗ trợ sử dụng TypeScript. Hãy gửi cho họ bất kỳ phản hồi nào có thể giúp họ phát triển Babel lên các cấp độ mới.

TopDev via blog.bitsrc.io