Babel 基础

Babel 是一个工具集，主要用于将 ES6(ES2015 及以后版本的统称) 版本的 JavaScript 代码转为 ES5 等向后兼容的JS代码，从而可以运行在低版本浏览器或其它环境中。

因此，你完全可以在工作中使用 ES6 编写程序，最后使用 Babel 将代码转为 ES5 的代码，这样就不用担心所在环境是否支持了。

功能

Babel 的转码工作包括三部分：

转换语法：

• let const 声明
• class
• for...of
• 解构赋值
• rest 参数与 ... 扩展运算符
• 箭头函数
• generator/async 函数
• 其他

补齐 API：

• 新添加的类：Promise、Set、Map、Symbol、Proxy、Iterator 等
• 新添加的类方法：Promise.resolve、Object.assign 等
• 新添加的实例方法：Array.prototype.find 等

引入 regeneratorRuntime 函数：

• 如果代码中有 Generator/async 函数语法，则在语法转换的时候，@babel/preset-env 会将 Generator/async 函数转换为调用 regeneratorRuntime 函数。
• regenerator-runtime 包提供了 regeneratorRuntime 函数的定义，regenerator-runtime 包可以单独安装，也可以在安装 @babel/polyfill 的时候自动安装。
• 通过在前端工程的主入口文件 import 'regenerator-runtime' 可以获得 regeneratorRuntime 函数的定义。
• 通过在前端工程的主入口文件 import '@babel/polyfill' 也可以获得 regeneratorRuntime 函数的定义。

使用方式

1. 通过 API 转码

require('@babel/core').transform('code', {
  presets: ['@babel/preset-env']
});

2. 通过命令行转码

npx babel main.js -o compiled.js

3. 通过 webpack 进行转码

组成

Babel 工具集包括核心功能包@babe/core、命令行工具包 @babel/cli、各种预设和插件包、垫片包 @babel/polyfill 等等。通过预设和插件转换语法，通过垫片补齐 API。

核心

• @babe/core 核心模块，必须安装的
• @babel/cli 命令行转码工具，如果使用命令行进行 Babel 转码就需要安装它，如果使用 webpack 的 babel-loader 转码就不用安装它

npm i -D @babe/core @babel/cli

插件

插件用来将特定的 ES6 语法转换为 ES5 语法，例如 @babel/plugin-transform-arrow-functions 插件用来将 ES6 的箭头函数转换成 ES5 的普通函数。插件需要通过配置文件来使用。常用插件：

• @babel/plugin-transform-runtime

npm i -D @babel/plugin-transform-runtime

预设

预设是一组插件的集合，例如 babel-preset-es2015 就是所有处理 ES2015 语法的二十多个插件的集合。这样我们就不用写一大堆插件配置项了，只需要用一个预设代替就可以了。预设需要通过配置文件来使用。常用预设：

• @babel/preset-env 最常用的预设，涵盖了 ES2015 以及以后的所有版本的 ES6 语法
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

npm i -D @babel/preset-env

垫片

@babel/polyfill 用来补齐新增的 ES6 API，并且引入 regeneratorRuntime 函数。安装 @babel/polyfill 的时候，会自动安装 core-js 与 regenerator-runtime 这两个依赖，但是 core-js 的版本固定在 2.x.x。core-js 用来添加 API，regenerator-runtime 用来定义regeneratorRuntime 函数。

# 注意垫片安装不需要 -D，因为我们的最终代码需要引用垫片的代码
npm i @babel/polyfill

// 在入口文件的开头部分引入
import '@babel/polyfill';

官方推荐单独安装 core-js 与 regenerator-runtime 来代替 @babel/polyfill。安装时可以选择 core-js 的版本，默认为最新的版本(2020年4月是 core-js 3.x.x 版本)，新版本的 core-js 实现了许多新的 API，例如数组的 includes 方法。

# 不需要安装 @babel/polyfill
npm i core-js regenerator-runtime

// 在入口文件的开头部分引入
import "core-js/stable";
// 以下两种方式都可以引入 regeneratorRuntime 函数，选择一种。
import "regenerator-runtime";
import "regenerator-runtime/runtime";

配置文件

无论是通过命令行工具 @babel/cli 来进行转码，还是通过 webpack 来行转码，通常情况下，都需要建立一个 Babel 配置文件来指定转码的规则。配置文件主要工作就是配置插件数组和预设数组。

格式

• babel.config.js ES6 模块
• .babelrc JSON 文件
• package.json 的 babel 属性

推荐使用 babel.config.js 格式的配置文件：

const presets = ["@babel/preset-env"]
const plugins = []

module.exports = {
  presets,
  plugins
}

.babelrc 格式的配置文件：

{
  "presets": ["@babel/preset-env"],
  "plugins": []
}

package.json 的 babel 属性

{
  "name": "demo01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  ...
  "babel": {
    "presets": ["@babel/preset-env"],
    "plugins": []
  },
  ...
}

插件和预设的参数

const presets = [
  [
    '@babel/preset-env',
    {
      'targets': ['> 1%', 'last 2 versions', 'not ie <= 8'],
      'useBuiltIns': 'usage',
      'corejs': 2,
      'modules': false
    }
  ]
]

const plugins = [
  [
    '@babel/plugin-transform-runtime',
    {
      "helpers": true,
      "corejs": false,
      "regenerator": true,
      "useESModules": false,
      "absoluteRuntime": false,
      "version": "7.0.0-beta.0"
    }
  ]
]

module.exports = {
  presets,
  plugins
}

执行顺序

• 插件比预设先执行
• 插件执行顺序是插件数组从前向后执行
• 预设执行顺序是预设数组从后向前执行