【前端工程化】Babel 配置

参考的是babel7的文档。

定义
将ES2015+的新语法转为ES5，确保低端运行环境能够认识并执行，

主要过程
解析：将代码解析成抽象语法树（AST）；
转换：Babel将AST通过babel-traverse对其进行深度优先遍历，根据插件对节点进行添加、更新和移除操作；
生成：将经过转换的AST通过babel-generator再转为JS代码。
常见的包
@babel/core
对代码进行转换的核心代码。

npm install --save-dev @babel/core
1
@babel/cli
安装之后可以使用命令行来编译文件。

npm install --save-dev @babel/cli
# 编译文件
npx babel demo.js --watch --out-file demo-compile.js
1
2
3
@babel/plugin*
如果不适用插件的话，那么文件的输出和输入时一样的。

假设我们想将代码成的箭头函数转为普通函数，可以安装@babel/plugin-transform-arrow-functions。然后在配置文件中新增：

// babel.config.js
module.exports = {
    plugins: [
        "babel/plugin-transform-arrow-functions"
    ]
}
1
2
3
4
5
6
常见的plugins可以参考 官网。

@babel/preset-env
从上面不难看出，如果我们需要什么输出什么样的js代码，可以按照不同的插件，但是一个个插件安装就太麻烦了，预设可以使用babel提供的presets。预设顾名思义，里面预设设定好了一些东西（包含插件）。常见的有@babel/preset-env。

关于更多预设包，官网提供了@babel/preset-env、@babel/preset-flow、@babel/preset-react和@babel/preset-typescript。

假设我们按照了@babel/preset-env，则配置文件应该修改我：

// babel.config.js
module.exports = {
    preset: [
      "@babel/preset-env"  
    ],
    plugins: []
}
1
2
3
4
5
6
7
在@babel/preset-env中提供了targets参数，可以指定运行环境：

// babel.config.js
module.exports = {
    preset: [
      [
          "@babel/preset-env", {
              "targets": {
                  "browsers": ['ie >= 8', 'iOS 7'] // 支持ie8，直接使用iOS浏览器版本7就支持的代码
              }
          }
      ]  
    ],
    plugins: []
}
1
2
3
4
5
6
7
8
9
10
11
12
13
关于Browserslist可以直接配置在package.json或者.browserslistrc文件中。

另外env还可以配置其他参数：

// babel.config.js
module.exports = {
    preset: [
      [
          "@babel/preset-env"", {
              "targets": {
                  "browsers": ['ie >= 8', 'iOS 7'] 
              },
              // 是否将ES6的模块化语法转译成其他类型
              //参数："amd" | "umd" | "systemjs" | "commonjs" | false，默认为'commonjs'
              "mode": "commonjs",
              //是否进行debug操作
              "debug": false,
              //强制开启某些模块，默认为[]
            "include": ["transform-es2015-arrow-functions"],
            //禁用某些模块，默认为[]
            "exclude": ["transform-es2015-for-of"],
            //是否自动引入polyfill，开启此选项必须保证已经安装了babel-polyfill
            //参数：Boolean，默认为false.
            //     entry, 根据配置的浏览器兼容，引入浏览器不兼容的 polyfill。
            //      usage, 会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加
            "useBuiltIns": false
          }
      ]  
    ],
    plugins: []
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@babel/polyfill
babel默认只转换 js 语法，而不转换新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。所以可以借助@babel/polyfill。

npm install --save @babel/polyfill
1
注意这里是--save。

使用它有两个缺点：

正常情况下（不是usage时），使用 babel-polyfill 会导致打出来的包非常大；
会污染全局变量，给很多类的原型链上都作了修改。
@babel/plugin-transform-runtime和@babel/runtime
这两个包是为了解决以上@babel/polyfill的不足。两者需要一起使用：

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
1
2
@babel/register
babel-register 模块改写 require 命令，为它加上一个钩子。此后，每当使用 require 加载 .js、.jsx、.es 和 .es6 后缀名的文件，就会先用 babel 进行转码。