Babel 基础用法

Babel

安装

pn add @babel/core @babel/cli @babel/preset-env -D

配置

babel.config.js 导出一个配置：

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    edge: '17',
                    firefox: '60',
                    chrome: '67',
                    safari: '11.1'
                },
                useBuiltIns: "usage",
                "corejs": "3.6.5"
            }
        ]
    ],
    plugins: [
        // ...
    ],
    env: {
        development: {
            // development env config
            // ...
        },
        production: {
            // production env config
            // ...
        }
    }
}

编译

CLI

安装 @babel/core 和 @babel/cli 后，在命令行直接运行：

./node_modules/.bin/babel src --out-dir lib

上述命令会把 src 目录下的代码用 babel.config.js 的配置进行编译，输出到 lib 目录下。

node

import babel from '@babel/core'
import fs from 'fs'
const code = fs.readFileSync('<dir>')
babel.transformSync(code, options)

Plugins & Presets

babel 的 transformation 是通过 plugins 来实现的，presets 是一组预设好的 plugins，例如：

pn add @babel/plugin-transform-arrow-functions
./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

结果：

// before
const fn = () => 1
// after
var fn = function fn() {
    return 1
}

使用 @babel/preset-env 来支持现代 ES 语法（内置了所有需要的插件），可以通过 babel.config.js 来配置：

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    edge: "17",
                    firefox: "60",
                    chrome: "67",
                    safari: "11.1"
                }
            }
        ]
    ]
}

通过设置 targets 可以指定代码运行的浏览器最低版本环境，只有在这些版本下不支持的语法 babel 才会进行 polyfill。

Polyfill

记录 7.4.0 以上 babel 的配置

使用 @babel/preset-env 的 useBuiltIns 和 corejs 字段配置：

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    edge: "17",
                    firefox: "60",
                    chrome: "67",
                    safari: "11.1"
                }
            },
            useBuiltIns: "usage",
            corejs: { version: "3.8" }
        ]
    ]
}

useBuiltIns 的值为 "usage" 时会检查代码中使用到的特性和对应的 targets 环境，只把使用到的需要 polyfill 的特性进行注入。

corejs 字段只有在 useBuiltIns: "usage" 或 useBuiltIns: "entry" 时有作用，会保证 @babel/preset-env 注入指定的 core-js 版本的 polyfill；默认只注入 stable 的特性，如果需要注入 proposals 的特性，可以这样 corejs: { version: "3.8", proposals:true }

你也可以在代码里手动引入 core-js：

import 'core-js/stable'

useBuiltIns: "entry" 会把所有 import "core-js/stable" 和 require('core-js') 替换成当前环境需要的单独特性导入，例如：

// before
import "core-js"
// after(different based on environment)
import "core-js/modules/es.string.pad-start"
import "core-js/modules/es.string.pad-end"

useBuiltIns: "usage" 会对每个文件需要用到的 polyfill 单独引入：

// before a.js
var a = new Promise()
// before b.js
var b = new Map()
// after a.js(if environment supports it)
var a = new Promise()
// after a.js(if environment does not support it)
import "core-js/modules/es.promise"
var a = new Promise()
// after b.js(if environment does not support it)
import "core-js/modules/es.map"
var b = new Map()