Quartz 🪬

Babel

2 min read

Babel là một thư viện đóng vai trò như một transpiler có chức năng transpile các ngôn ngữ lập trình thành các phiên bản khác nhau của nó. Chẳng hạn từ JSX Element thành JavaScript ES6, rồi từ JavaScript ES6 thành JavaScript ở những phiên bản cũ hơn.

Để sử dụng, cần cài đặt thông qua ba package như sau:

npm install @babel/core @babel/preset-env babel-loader --save-dev

Đối với Yarn:

yarn add @babel/core @babel/preset-env babel-loader --D

Với:

  • @babel/core: là thành phần chính của babel.
  • @babel/preset-env: dùng để định nghĩa các preset, có thể hiểu như là các giá trị mặc định. Đối với React, ta cần dùng thêm @babel/preset-react.
  • babel-loader: cho phép Webpack sử dụng Babel trong quá trình đóng gói .

Cấu hình webpack.config.js để sử dụng babel-loader như sau:

// webpack.config.js
module.exports = {
    mode: 'development',
    entry: './index.js',
    output: { filename: 'main.js', publicPath: 'dist' },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                    },
                },
            },
        ],
    },
}

Cấu hình trên giúp cho Webpack tìm ra tất cả các tập tin JS (ngoại trừ các tập tin trong node_modules) và transpile chúng sử dụng babel-loader với @babel/preset-env.

Sau khi được cấu hình, chúng ta có thể viết các cú pháp của ES6 trong tập tin JS, chẳng hạn như template string:

var name = 'Kwan', time = 'today'
 
console.log(`Hello ${name}, how are you ${time}?`)

Có thể sử dụng các cú pháp import/export của ES6 (xem thêm JS Module) thay vì dùng require:

import moment from 'moment'

Đa số các trình duyệt hiện nay đều hỗ trợ ES6, ngoại trừ các trình duyệt cũ như là IE9.

list
from [[Babel]]
sort file.ctime asc

Resources

Backlinks