Babel7

Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 代码，以便能够在旧版本的浏览器或其他环境中运行。但是，Babel 本身是无法转换代码的，它的转换功能是通过不同的插件来实现的，Babel 插件是用于指定转换规则的工具，每个插件都可以处理不同的语法或功能转换。

Babel 本身就是一个可以独立使用的工具，但是目前开发中很少直接使用 Babel，都是和 Webpack 等构建工具来配合使用。

编译器的作用就是可以将一种代码转换为另一种代码。
Babel 不仅可以转换 ES6+ 的语法，也可以转换 React、TypeScript。

Babel 和 PostCSS 都是微内核架构，工具本身只编写自身核心的代码，具体的功能通过不同的插件来实现。

ES6+ 的语法通过 Babel 就可以转换，为什么还需要 Polyfill?

一些 ES6+ 的语法特性，例如箭头函数、模板字符串、常量声明等，只涉及到语法层面的改变，因此可以在不引入新的 JavaScript 对象或方法的情况下通过简单的语法转换为旧版本的 JavaScript。
但是，有些 ES6+ 特性涉及到新的 JavaScript 对象、方法或内置功能，例如 Map、Set、Symbol、Promise、async/await 等，这些特性不能通过简单的语法转换来实现，因此需要使用 Polyfill。

原理：

Babel 的工作原理整体上可以分为三个阶段：解析阶段 Parsing、转换阶段 Transformation、生成阶段 Code Generation。

具体来说，可以分为以下步骤：

1. 词法分析：读取源代码文件，对文件中的每个单词做分析。其实就是读取源代码文件中的每个单词。
   

2. 生成 tokens 数组：将词法分析出来的单词生成 tokens 数组。其实就是对词法分析读取出来的单词进行分类。

   

3. 语法分析：语法分析 tokens 数组中的每一项代表什么含义。其实就是分析 tokens 数组的每一项其真正的语法表示的是什么。

4. 生成 AST 抽象语法树：根据语法分析出来的每一项的真正含义生成 AST 抽象语法树。

5. 对 AST 抽象语法树进行遍历。

6. 访问 AST 抽象语法树中的每个结点。

7. 在访问结点的过程中对结点应用对应的插件，进行结点的修改。

8. 遍历完之后就生成新的 AST 抽象语法树。

9. 最后根据新的抽象语法树生成转化后的新的代码。

配置文件：

通常，需要指定 Babel 的编译规则来编译代码。Babel 的配置文件默认会在当前目录寻找文件，有：.babelrc、.babelrc.js、babel.config.json、babel.config.js、package.json，它们的配置项都是一样的，作用也一样，只需要选择一种即可。

// JSON
{
  "presets": [...],
  "plugins": [...]
}

// JavaScript
const presets = [ ... ];
const plugins = [ ... ];
module.exports = { presets, plugins };

// package.json
{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

Babel 中的模块：

@babel/core：

@babel/core：Babel 的核心代码。必须安装。

安装命令：

npm install --save-dev @babel/core

基本用法：可以在 JS 程序中直接引入并使用。

const babel = require("@babel/core");
babel.transformSync(code, optionsObject);

@babel/cli：

@babel/cli ：是 babel 提供的内建命令行工具。如果需要在命令行中直接使用 Babel，就需要安装 @babel/cli ，否则不需要安装。

安装命令：

npm install --save-dev @babel/cli

基本用法：

npx babel src/index.js -o dist/index.js // 解析 src 目录下的 index.js 文件，并应用指定的代码转换功能，输出到 dist 目录下的 index.js 文件中

@babel/plugin*：

@babel/plugin*：代码转换功能以插件的形式出现，插件是小型的 JS 程序，用于指导 Babel 如何对代码进行转换。

安装命令：

npm install --save-dev @babel/plugin-transform-arrow-functions // 将箭头函数转换为 ES5 兼容的函数表达式的插件

基本用法：

npx babel src/index.js -o dist/index.js  --plugins=@babel/plugin-transform-arrow-functions // 多个插件之间用逗号隔开

@babel/preset：

@babel/preset-env：是 Babel 提前预设好的一系列 Babel 中的插件的组合。如果要使用的 Babel 插件很多，一个一个安装配置是很麻烦的，就可以使用 Babel 中的预设。

plugins 插件数组的执行顺序是从左到右执行的，presets 预设数组的执行顺序是从右到左执行的。
插件 plugins 在预设 presets 之前执行。

安装命令：

npm install --save-dev @babel/preset-env // 在代码中使用了多种 ES6+ 的语法，一个一个地使用插件很麻烦，就可以使用一个名称为 env 的 preset

基本用法：

npx babel src/index.js -o dist/index.js --presets=@babel/env

@babel/preset-env 的参数项：

1. target：用来设定目标浏览器。默认值为空对象。

   presets: [
       [
         '@babel/preset-env',
         {
           targets: {
             ie: "11"
           }
         }
       ]
    ]
   

2. useBuiltIns：用来设置预设以什么样的方式来使用 Polyfill。默认值为 false。

   属性值有：

   • false：不使用 Polyfill。
   • usage：无需手动引入 Polyfill。代码中需要哪些 Polyfill，Babel 会自动按需加载需要的 Polyfill。
   • entry：需要在入口文件中手动引入 Polyfill。只要是目标浏览器需要的 polyfill，且包含在入口文件引入的 core-js 和 regeerator-runtime 包中，不管代码中是否需要都全部引入。

     使用 entry 属性值时，还需要在打包的入口文件处引入 core-js 和 regenerator-runtime。

     // 不是直接引入 core-js。而是引入 core-js/stable，表示引入 core-js 中成为标准的那些部分；也可以引入 core-js 中某些具体的功能。
     import 'core-js/stable'
     import 'regenerator-runtime/runtime'
     

3. corejs：设置 corejs 的版本。默认值为 2。

   corejs 的属性值需要与安装的 core-js 的版本能对应上，否则会报错。corejs 取值为 2 的时候，需要安装并引入 core-js@2 版本；如果 corejs 取值为3，必须安装并引入 core-js@3 版本。

4. modules：用来设置是否把 ES6 的模块化语法改成其它模块化语法。默认值为 auto，可以取值amd、umd、systemjs、commonjs、cjs、auto、false。

5. debug：如果需要在命令行打印加载项，可以设置 debug。

@babel/polyfill：

Polyfill 可以理解为是补丁，其实就是实现某些功能或特性的 JavaScript 脚本。有一些语法特性浏览器是不认识的，使用的话必然报错（例如：Promise、Generator、Symbol 等，以及一些实例方法 Array.prototype.includes 等），此时就可以使用 Polyfill 来打一个补丁，将相关功能的代码包含进项目中。
Polyfill 并不是 Babel 特有的功能，只不过此处使用的是 Babel 中的 Polyfill。

@babel/polyfill：由 core-js 和 regenerator-runtime 组成。前者是 JS 标准库，包含不同版本 JavaScript 语法的实现；后者是 facebook 开源库，用来实现对 Promise、Generator、async/await 函数等的支持。

Babel 7.4.0 之前，是使用 @babel/polyfill 包，但是该包现在已经不建议使用了，因为 @babel/polyfill 把两个 npm 包全部都引入到了打包后的文件里了，导致打包后的体积过大；而且@babel-polyfill 可能会污染全局变量，给很多类的原型链上都作了修改，这就有不可控的因素存在。

Babel7.4.0 之后，建议单独使用 core-js 和 regenerator-runtime 。

安装命令：

npm install --save core-js regenerator-runtime

基本用法：

import "core-js/stable";
import "regenerator-runtime/runtime";

如果确切地知道所需要的功能，可以只引入使用的方法。

import 'core-js/features/array/from'; 
import 'core-js/features/set';      
import 'core-js/features/promise';

@babel/runtime：

@babel/runtime ：可以用于提取公共函数，但是提取出来之后，代码里不会自动引用这些公共函数。
@babel/plugin-transform-runtime可以自动引用公共函数。

例如：使用 class 类的时候，Babel 会在前面添加一个帮助函数。

// 源代码
class Test {}

// 编译后的代码
"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Test = function Test() {
  _classCallCheck(this, Test);
};

在编译后的代码里，帮助函数被直接迁入到代码中了。如果有多个脚本文件，每个都用到了 class，那么每个编译后的文件都包含一个一模一样的帮助函数，造成了冗余。可以使用 @babel/runtime 和 @babel/plugin-transform-runtime来解决：

1. 安装依赖：npm i --S @babel/runtime @babel/plugin-transform-runtime。
2. 在 Babel 配置文件中进入如下配置：

   plugins: [
     '@babel/plugin-transform-runtime'
   ]
   

3. 再次编译，可以看到不再是直接把帮助函数迁入代码中，而是使用 require 加载公共帮助函数。

   "use strict";
   
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
   
   var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
   
   var Test = function Test() {
     (0, _classCallCheck2.default)(this, Test);
   };
   

@babel/register：

@babel/register 提供了动态编译，换句话说，源代码能够真正运行在生产环境下，不需要 babel 编译这一环节了。但是动态编译会导致程序在速度、性能上有所损耗。

安装：

npm install --save-dev @babel/register

然后在入口文件引入：

require('@babel/register')
require('./app')

在入口文件头部引入 @babel/register 后，在 app 文件中即可使用任意 ES2015 的特性。

@babel/node：

@babel-register 提供动态编译，能够让源代码真正运行在生产环境下，但仍需要做部分调整，比如新增一个入口文件，并在该文件中 require(‘@babel/register’)；而 @babel-node 能真正做到一行源代码都不需要调整：

npm install --save-dev @babel/core @babel/node

npx babel-node app.js

使用 Babel：

1. 新建一个文件夹 test-babel。
2. 在终端进入这个文件夹下，执行 npm install --save-dev @babel/core @babel/cli 安装 Babel。
3. 在 test-babel 文件夹下新建 src/index.js，并编写一些 ES6+ 的新语法。
4. 在终端执行 npx babel src/index.js -o dist/index.js，会自动生成 dist/index.js。但此时，dist/index.js 的代码和 src/index.js 的代码并没有太大区别，因为现在所安装的 Babel 只是一个有命令行的空壳而已，还需要为 Babel 添加一些插件来让 babel 工作。
5. 在终端执行 npm install --save-dev @babel/preset-env 来安装 @babel/preset-env 插件。
6. 在根目录下新建 babel.config.js 的配置文件进行配置，告知 Babel 来使用插件。

   module.exports = {
     presets: [
       [
         '@babel/preset-env'
       ]
     ]
   };
   

7. 在终端再次执行 npx babel src/index.js -o dist/index.js，会发现 dist/index.js 已经转换为 ES5 的语法了。