babel初识

Babel

官方文档定义：

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
下面列出的是 Babel 能为你做的事情：
语法转换
通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
源码转换 (codemods)

babel只是提供了一个“平台”，让更多有能力的plugins入驻我的平台，是这些plugins提供了将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法的能力。

---

工作原理

babel的工作过程分为三个阶段：parsing(解析)、transforming（转化）、printing（生成）

• parsing阶段babel内部的 babylon 负责将es6代码进行语法分析和词法分析后转换成抽象语法树
• transforming阶段内部的 babel-traverse 负责对抽象语法树进行变换操作
• printing阶段内部的 babel-generator 负责生成对应的代码

plugins在transforming阶段进行操作，转化成新的AST，再交给第三步的babel-generator。

如果没有这些plugins，那么babel这个“平台”是不具备任何能力的。就好像这样：

const babel = code => code;

---

使用

babel将ECMAScript 2015+ 版本的代码分为了两种情况处理：

• 语法层： let、const、class、箭头函数等，这些需要在构建时进行转译，是指在语法层面上的转译
• api方法层：Promise、includes、map等，这些是在全局或者Object、Array等的原型上新增的方法，它们可以由相应es5的方式重新定义

babel对这两种情况的转译是不一样的，我们需要给出相应的配置。

配置文件 .babelrc

使用 Babel 第一步就是配置此文件，放在项目根目录，此文件用于配置转码规则和插件，基本格式：

{
    "presets":[],
    "plugins":[]
}

对预设（presets）和插件（plugins）进行配置，因此不同的转译器作用不同的配置项（Preset是Plugin的集合）。

执行顺序

• 先执行完所有Plugin，再执行Preset。
• 多个Plugin，按照声明次序顺序执行。
• 多个Preset，按照声明次序逆序执行。

语法层面

preset-env

{
  "presets": [
    ["@babel/env",  {
      "modules": false //默认都是支持 CommonJS
    }]
  ]
}

API 和全局对象转译器

babel polyfill

相当于一个垫片，可以转译所有 ES6 API 和全局对象。
缺点：增加包体，比如仅是使用到一种 ES6 新增 API，他也会增加所有的转移语法。

两种方式：

• @babel/plugin-transform-runtime
• @babel/polyfill

@babel/plugin-transform-runtime

安装：

npm install --save-dev @babel/plugin-transform-runtime    
npm install --save @babel/runtime

引用：在 .babelrc 中添加配置

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

但对于一些实例化方法比如 Array.includes(x)，babel-plugin-transform-runtime 无法转换，此时需要接入 @babel/polyfill

@babel/polyfill

修改全局 prototype 来对 API 和全局变量的垫片的，所以可以转译实例方法。

安装：npm install --save-dev @babel/polyfill 引用：

1. import "@babel/polyfill";

2. require('@babel/polyfill');

3. module.exports = {// 适合使用 webpack 构建的项目
　　   entry: ["@babel/polyfill", "./app/js"]
   };

es6-promise

安装：

npm install es6-promise

如果仅使用到 promise 相关 API，可以仅添加此转译器

引用：

import _promise from 'es6-promise';

const Promise = _promise.Promise;

.jsx,flow,TypeScript 等插件转译器

@babel/preset-react

当你使用 react 项目时，需要使用此包配合转译

安装：

npm install --save-dev @babel/preset-react

引用：在 .babelrc 中添加配置

"presets": ["@babel/preset-react"]

@babel/preset-typescript

当你项目是用 TypeScript 编写时，需要使用此包配合转译

安装：

npm install --save-dev @babel/preset-typescript

引用：在 .babelrc 中添加配置

"presets": ["@babel/preset-typescript"]

.babelrc 常用示例

react 项目

安装：

npm install --save-dev @babel/preset-env @babel/plugin-transform-runtime @babel/preset-react

{
  "presets": [
    ["@babel/env", {
      "modules": false
    }],
    "@babel/preset-react"
  ],
  "comments": false,//不产生注释
  "plugins": ["@babel/plugin-transform-runtime"]
}