Babel 7入门基础知识全面实践案例篇【1】推荐。

babel前面我们梳理总结 webpack入门基础知识的时候已经用过了。趁着这个机会顺便把Babel基础知识回顾梳理一下，也欢迎正在使用babel的同学一起交流探讨，感谢。

一、Babel是什么？

二、.Babel是如何工作的呢？或者原理是什么？

2.1 解析【parser】

2.1.1 什么是词法分析？

2.1.2 什么是语法分析？

2.2 转换【transform】

2.3 生成【generate】

三、Babel 预设presets

3.1 语法插件和转译插件

3.1.1 语法插件

3.1.2 转译插件

3.2 常用的预设【preset】

四、Babel的核心【@babel/core】

4.1 核心周边【Babel的工作过程】

4.2 集成

4.2.1 @babel-cli

4.2.2 @babel-register

4.2.3 @babel-polyfill

4.2.4 @babel-runtime 和 @babel-plugin-transform-runtime

4.2.5 babel-loader

一、Babel是什么？

关于这个问题Babel官方是这样写的：Babel 是一个 JavaScript 编译器。

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

也就是说把ES2015中的一些新特性比如我们在前面使用 React 前端框架做的案例中用到的箭头函数等有些浏览器是不支持的，而我们通过使用Babel的插件后就能使用在当前及旧版浏览器或者其他环境中了。

babel官方为了让我们更好理解，给我们举了例子。

// Babel 接收到的输入是： ES2015 箭头函数
[1, 2, 3].map(n => n + 1);

// Babel 输出： ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});

上面我们可以看到我们输入代码用的是ES2015新特性箭头函数，而经过Babel处理之后输出的是es5的语法，这就是Babel，它的工作原理是什么？

二、.Babel是如何工作的呢？或者原理是什么？

下面这张图片是来源Babel官网，属于工具软件包，我们要知道Babel是工具链，其本身不具备转化功能，而是将转化功能分解到插件中，不过不配置任何插件，经过Babel的代码输入和输出是没有区别的。

Babel的主要工作流程分为三个阶段: 解析(parser) 、转换(transform) 、生成(generate)

2.1 解析【parser】

通过 @babel/parser 把源代码字符串转成抽象语法树(AST)，在解析过程中主要是两个阶段：词法分析和语法分析。

2.1.1 什么是词法分析？

词法分析阶段把字符串形式的代码解析成一个个具有实际意义的语法单元组成的数据，这种数据被称之为令牌（tokens）流。ps：语法单元就是被解析语法当中具备实际意义的最小单元。

JavaScript 中常见的语法单元：空白、注释、字符串、数字、标识符、运算符、括号及其他。

2.1.2 什么是语法分析？

语法解析器把 Tokens 转换为抽象语法树 AST。抽象语法树，它是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

举例：下图是console.log('hello world') 代码转换为抽象语法树的数据。参考网站：https://astexplorer.net/

类似上面的结构叫做节点，一个 AST 是由单个或者多个这样的节点构成的，节点内部还可以有子节点，构成一棵语法树。

2.2 转换【transform】

通过@babel/traverse遍历抽象语法树(AST),并调用Babel配置文件中的插件,对抽象语法树(AST)进行增删改。

2.3 生成【generate】

通过@babel/traverse遍历抽象语法树(AST),并调用Babel配置文件中的插件,对抽象语法树(AST)进行增删改。

三、Babel 预设presets

我们前面也说了 Babel 本身不具备转化功能，而是将转化功能分解到插件中，Babel的插件主要分为语法插件和转译插件。插件只对单个功能进行转换，当配置插件比较多时，就可以封装成预设（presets）以此来简化插件的使用，预设简单说就是一组原先设定好的插件，是一组插件的集合

3.1 语法插件和转译插件

3.1.1 语法插件

语法插件只允许Babel解析语法，添加语法插件后，Babel能够解析更多的语法。比如我们调用方法时最后一个参数之后添加逗号就是非法的，如果源码这种写法经过Babel之后就提示语法错误。

但最近的 JS 提案中已经允许了这种新的写法(让代码 diff 更加清晰)。为了避免 babel 报错，就需要增加语法插件 babel-plugin-syntax-trailing-function-commas

3.1.2 转译插件

当添加转译插件后，会将源代码进行转译输出。例如：箭头函数 (b) => b 就会转化为 function (b) {return b}。完成这个工作的插件叫做 babel-plugin-transform-es2015-arrow-functions

当插件配置比较多时，可以把插件预先设定好封装成预设（presets）以此来简化插件的使用，所以预设就是一组插件的集合。

3.2 常用的预设【preset】

常见的预设有四种：

@babel/preset-env、babel/preset-react、babel/preset-typescript、babel/preset-flow。

@babel/preset-env 主要可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5
@babel/preset-react react框架需要的
@babel/preset-flow flow需要的。Flow 是一个静态类型检测工具，进行类型检查，类似于ts
@babel/preset-typescript typescript需要的

可参考Babel的官网：

关于执行顺序：

Plugin 会运行在 Preset 之前
Plugin 会从前到后顺序执行
Preset 的顺序则从后向前

preset 的逆向顺序主要是为了保证向后兼容，因为大多数用户的编写顺序是 ['es2015', 'stage-0']。这样必须先执行 stage-0 才能确保 babel 不报错。因为低一级的 stage 会包含所有高级 stage 的内容

四、Babel的核心【@babel/core】

@babel/core是 babel的核心，主要作用就是根据我们的配置文件转换代码，配置文件一般是.babelrc(静态文件)或 babel.config.js(可编程)。

4.1 核心周边【Babel的工作过程】

Parser( @babel/parser ) ：将源代码解析为 AST
Traverser( @babel/traverse ) ：对 AST 进行遍历，转换插件会通过它获取感兴趣的AST节点，对节点继续操作
Generator( @babel/generator ) ：将 AST 转换为源代码

4.2 集成

Babel的集成 @babel-cli、@babel-node、@babel-register、@babel-polyfill、@babel-runtime 和 @babel-plugin-transform-runtime

4.2.1 @babel-cli

Babel 自带了一个内置的 CLI 命令行工具，可通过命令行编译文件。此外，各种可直接调用脚本都存放在 @babel/cli/bin 中。一个可通过 shell 执行的实用脚本 - babel-external-helpers.js，以及 Babel cli 主脚本 babel.js

4.2.2 @babel-register

babel-register模块改写 require 命令，为它加上一个钩子。此后，每当使用 require 加载 js jsx es es6 后缀名的文件，会使用 babel 进行转码。

使用时，必须首先加载 require ('babel-register')，需要注意的是，babel-register 只会对 require 命令加载的文件转码，不会对当前文件转码，另外由于是实时转码，所以只适合在开发环境中使用。

4.2.3 @babel-polyfill

babel 默认值转换 js 语法，而不转换新的 API，比如 Generator、Maps等全局对象，以及一些定义在全局对象上的方法（Object.assign）都不会转码。

例如：es5 在 Array 对象上新增了 Array.from方法，babel 不会转码这个方法，如果要使用这个方法运行，必须使用 babel-polyfill

使用时，在所有代码运行之前增加 require('babel-polyfill')。或者更常规的操作是在 webpack.config.js 中将 babel-polyfill 作为第一个 entry。因此必须把 babel-polyfill 作为 dependencies 而不是 devDependencies

主要缺点：

使用 babel-polufill 导致打出来的包体积比较大，因为 babel-polyfill 是一个整体，把所有方法都会加到原型链上。比如使用了 Array.from，但它会把 Object.defineProperty也给加上，属于一种浪费，要解决这个问题，可以通过单独使用 core-js 的某个类库解决，core-js 是分开的
babel-polyfill 会污染全局变量，给很多的原型链上作出修改，所以会比较倾向于使用 babel-plugin-transform-runtime

注意：如果代码中使用了较高版本的 js实例方法，比如 [1,2,3].includes(1),此时还是需要使用 polyfill

4.2.4 @babel-runtime 和 @babel-plugin-transform-runtime

有时语法的转换相对复杂，有时会需要一些 helper 函数，比如转换 es6 的 class，es6的 class 需要一个 _classCallCheck 的辅助函数，如果有多个文件都用到了 es6 的 class，则需要在每个文件中都要定义一遍，会造成一种浪费；如果将 helper 函数都抽离到一个包中，所有用到的文件都可以引用可减少代码量。@babel/runtime ，提供了各种 helper 函数；那么问题又来了，我们该如何知道该引入哪个 helper 函数呢？所以又有了 @babel/plugin-transform-runtime插件帮我们自动引入 helper

/* test.js */
const Test {}
/* test-compiled.js */
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);
};