字数：4627， 浏览工夫：12分钟，点击浏览原文

枫林新叶催陈叶，雏凤清于老风声。 一一李商隐

【前端工程化】系列文章链接：

  • 01 扬帆起航-开发环境
  • 02 白璧微瑕-包管理器
  • 03 席卷八荒-Webpack根底篇
  • 04 席卷八荒-Webpack进阶篇

示例代码仓库：https://github.com/BWrong/dev-tools

申明：如依照文中代码执行报错，请查看依赖版本是否和示例代码仓库中统一。

概述

作为一个有谋求的前端，如果你没有听过Babel的小名，那就真的是out了。不过说实话不太理解Babel的话，其实对日常开发的影响也不大，因为很多脚手架曾经配置好了，不必本人折腾。然而如果你想玩转前端工程化这块，这就是绕不过的坎。

babel官网定义为一款JavaSscript编译器。

Use next generation JavaScript, today.

当初就应用下一代JavaScript语法吧

这里的“下一代”是泛指新的、临时还不被浏览器广泛支持的，而不是局限于某个确定的版本。

简略来说，浏览器（特地是一些低端浏览器，说你呢IE）对ECMAScript标准的反对是滞后的，新的语法尽管可能给咱们带来更好的编程体验，却奈何往往不能不能间接在用户的浏览器运行，所以就须要在浏览器运行这些代码前将其转换成反对的语法，而Babel就是负责这个的，当然它的能力远不止如此，前面咱们一一道来。

Babel次要做的就是这几点：

  • 语法转换：将新的语法转换成兼容性更好的旧语法。
  • 个性垫片：通过Polyfill 实现目标环境中短少的个性，将环境的个性差别垫平，说白了还是做兼容。
  • more...
// Babel Input: ES2015 arrow function[1, 2, 3].map((n) => n + 1);// Babel Output: ES5 equivalent[1, 2, 3].map(function(n) {  return n + 1;});

运行形式

Babel的运行过程分为三个阶段：解析 --- 转换 --- 生成

  1. 解析：解析代码，并生成AST形象语法树
  2. 转换：将上一步的AST转换成指标环境反对的AST
  3. 生成：依据转换后的AST生成指标代码

不难发现，第二步就是Babel执行的外围操作。但Babel本身是不具备任何转换能力，必须借助一些插件来实现语法的转换。对于插件，后续会具体介绍，这里只需记住，插件赋予了babel弱小的能力，没有插件它算个球。

如果想理解具体的转换过程，请浏览从babel讲到AST。

babel解析语法的内核应用的是babylon，当初已更名为@babel/parser。

Babel7

作者在写这篇文章的时候，babel的版本是7.10.0，babel7带来了很多新的个性，为了防止给大家造成误导，这里先列出babel7的变动，防止和之前版本的配置混同。

次要的变动如下：

  • preset：举荐应用 env代替es201x；删除stage-x ，因为这些草案中的个性不稳固，保护这些preset会节约大量精力，所以官网放弃了。如果须要应用能够本人显式的增加对应的插件。

  • npm包名：将所有babel-*更改为@babel/*，更加合乎npm命名标准。

    • babel-cli -> @babel/cli。
    • babel-preset-env -> @babel/preset-env，简写为 @babel/env
  • 对低于nodejs6.0不再提供反对。
  • @babel/cli中不再蕴含@babel/node，如要应用须要独自装置。
  • 提供babel-upgrade帮忙开发者从6到7的版本升级。

应用和配置

应用形式

babel的应用场景次要分为两种：命令行和构建工具。

  • 命令行

babel为命令行提供了@babel/cli工具，反对在命令行间接执行babel命令。

首先，装置必要的包：

npm install --save-dev @babel/core @babel/cli
这里必须要装置@babel/core，它是babel的外围，它是后续所有的基石，无论哪种形式都必不可少。

装置好在我的项目中执行babel命令就能够进行转换了。

babel src --out-dir lib # 将src下的文件解决后输入到lib
  • 构建零碎

    在构建工具中应用才是咱们应用babel更罕用的形式。这里咱们以webpack为例。

    babel提供了一个loader：babel-loader，应用这个loader咱们就能很轻松实现代码转换。

module: {  rules: [    {      test: /\.js$/,      loader: 'babel-loader',      options: {          // 配置项      }    }  ]}
  • 运行时（不举荐）

    babel还提供了运行时环境下的解决，能够在代码运行时，实时进行转换。不过并不举荐这种形式，因为它是在代码运行时实时进行转换，效率较低。

    除了以上形式，还有一些其余的应用形式，详情能够查看babel配置。

配置文件

后面的形式咱们都没有提供配置，所以输入和输出是一样的，这齐全没有意义。所以咱们个别会提供一些配置，来通知babel如何进行转换。

babel7反对多种形式来进行配置：

  • babel.config.json（我的项目范畴）
  • .babelrc.json（绝对文件）
  • package.json中增加babel字段
{  "name": "my-package",  "version": "1.0.0",  "babel": {    "presets": [ ... ],    "plugins": [ ... ],  }}

后面两种配置文件都应用了json格局，其实babel还反对其余格局，如 .js，.cjs（Commonjs）和.mjs（ESModule），它们绝对于json格局更加灵便，能够在配置中进行编程解决，然而会使配置无奈动态剖析，失去可缓存性。

// babel.config.jsmodule.exports = {  presets: [],  plugins: []};

所有形式的配置内容都是相似的，咱们能够依据本人的应用场景进行灵便抉择。

babel尽管有多种形式来写配置文件，然而配置的内容都是相似的，次要蕴含plugins和presets两局部，不过这里须要留神几点：

  • 配置格局：plugins和presets配置项均为数组，如果每项不须要配置的话，间接放入数组（值为项的字符串名称）；如果要配置的话，则须要把格局改成数组，该数组的第一个元素是该项的字符串名字，第二个元素是该项的配置对象。

    这里填写的plugins和presets，babel会主动查看是否已被装置在node_modules上面，当然，也能够应用相对路径来应用本地文件。

"plugins": [    [      "component",      {        "libraryName": "element-ui",        "styleLibraryName": "theme-chalk"      }    ],    "@babel/plugin-transform-runtime" ]
  • 执行程序：plugins会从前到后执行，presets会从后向前执行，且plugins会比presets先执行

    presets逆序执行的目标是为了保障向后兼容，咱们在配置的时候依照标准的工夫程序列出即可，如['es2015', 'stage-1']，这样就会先应用stage-1，否则就会呈现谬误。

  • 短名称：在配置plugin和preset名字的时候，能够省略名字中的babel-plugin-和preset-字样，仅应用插件的名字就能够了。
{  "plugins": [    "myPlugin", // 残缺名字："babel-plugin-myPlugin"    "@org/myPlugin" // 残缺名字："@org/babel-plugin-myPlugin"  ],  "presets":[    "myPreset", // 残缺名字："babel-preset-myPreset"    "@babel/myPreset" // 残缺名字：@babel/preset-myPreset  ]}

对于一些罕用plugins和presets的罕用配置，咱们在上面会有具体介绍。

外围

babel的外围除了@babel/core就是plugins和presets了，咱们个别应用babel其实就是在折腾这两块内容。上面咱们就来一探到底。

Plugin

后面咱们说了，babel的转换齐全依附插件，babel领有的能力齐全取决于给它配置了哪些插件。

babel的插件分为两种：

  • 语法插件：赋予babel解析特定语法的能力，能够了解一个为babel服务的翻译官，仅做翻译解析工作，工作在AST转换阶段。
  • 转译插件：转译插件即把特定的语法转换成指定规范的语法。

    比方将箭头函数 (x) => x 转换成 function (x) {return x}，只须要配置箭头函数转译插件即可。

{  "plugins": [    "@babel/plugin-transform-arrow-functions"  ]}
留神：应用了转译插件，就不再须要配置对应的语法插件了，因为转译插件会主动启用相应的语法插件。其实很容易了解，连解析都做不到，又何谈转换呢。

插件的应用大略分为两步：

  1. 将插件增加到配置文件的plugins属性中，可依据插件文档做相应配置。
  2. 装置插件到我的项目中，应用npm或者yarn均可

每个插件的性能是繁多的，所以个别转换需要要应用的插件数量比拟多，这时候能够思考presets。罕用的插件和用法能够查看babel-plugins

自定义插件

除了应用社区提供的插件，咱们也能够本人开发。

module.exports = function() {  return {    visitor: {      Identifier(path) {        const name = path.node.name;        // reverse the name: JavaScript -> tpircSavaJ        path.node.name = name          .split("")          .reverse()          .join("");      },    },  };}

这里只是一个简略的例子，理论的插件开发远不是如此简略，能够执行查看Babel 插件手册学习。

Presets

在理论的开发中，咱们如果用ES6来进行开发的话，那须要转换的语法是十分多的，难道要一个一个去配置吗？还要不要配陪妹子了？

这个时候，就该presets退场了。presets能够了解为一组插件的汇合，就像你去德克士间接点一个全家桶，而不用一个一个给服务员说要鸡腿、鸡翅、薯条...（如果想和服务员小姐姐多待一会，也不是不能够）

presets的起源次要有以下几种路径：

  • 官网：官网为罕用的环境提供了preset。

    • @babel/preset-env
    • @babel/preset-flow
    • @babel/preset-react
    • @babel/preset-typescript
    • stage-X (试验性 Presets)
  • 社区：在npm下面能够找到许多社区保护的preset，比方vue和react都有保护了本人的preset。
  • 自定义：在有非凡需要的时候，能够本人创立preset。
module.exports = () => ({  presets: [ // 援用其余preset    require("@babel/preset-env"),   ],  plugins: [ // 要汇合的插件    [require("@babel/plugin-proposal-class-properties"), { loose: true }],     require("@babel/plugin-proposal-object-rest-spread"),  ],});

留神：Stage-x) presets 中的任何转换都是针对未公布的 Javascript 个性（如 ES6 / ES2015）的更改，都是不稳固的，未来这些提案可能会发生变化，请审慎应用，特地是第三阶段前的提案。从v7开始，所有针对规范提案阶段的性能所编写的预设(stage preset)都已被弃用，官网曾经移除了 @babel/preset-stage-x。

@babel/preset-env

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

这个是咱们最罕用的，也是官网当初举荐的preset，它是一个智能预设，咱们无需再关怀特定环境下所需的转换插件（只须要指定指标环境），就能够应用最新的语法。除了可能缩小应用难度，还可能使转换进去的代码体积更小。

preset-env会依据配置的指标环境中短少的性能，抉择对应的插件进行必要的转换和polyfill，而指标环境反对的个性就不会转换，而不是无脑的一把梭哈。

如果不进行配置，它将应用默认配置，即 latest（env保护的插件列表），会将最新的JS个性(ES2015,ES2016...，不蕴含 stage 阶段)，将其转换成ES5代码。所以如果应用了提案阶段的语法，则须要自行额定配置。

如何指定指标环境
  • 配置文件：通过配置文件的targets属性指定指标环境
{  "presets": [    ["env", {      "targets": {        "browsers": ["last 2 versions", "safari >= 7"],        "node": "12.10"      }    }]  ]}
  • browserslistrc：如果是浏览器或者Electron，官网举荐应用.browserslistrc文件来指定指标环境（能够和autoprefixer、stylelint等其余工具共享配置）。

    不过如果在配置文件中设置了 targets 或 ignoreBrowserslistConfig，.browserslistrc中配置的内容将不会失效。

# .browserslistrclast 2 Chrome versions

具体用法请查看browserslist 的更多配置。

其余配置

除了targets外，还有一些配置项也比拟罕用：

  • modules: 用于指定转换后的模块标准，可设置为"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false，默认为"auto"。
  • useBuiltIns：此选项配置如何@babel/preset-env解决polyfill，在前面介绍polyfill咱们会具体介绍。
  • corejs：用于指定corejs的版本，仅当应用了useBuiltIns: usage或者useBuiltIns: entry此配置才无效，应用时肯定要配置正确的版本，否则会报错。

    以后默认的版本是2.0，不过倡议应用3.0版本，因为2.0曾经不会再增加新的个性了，如果应用了一些较新的语法，将会无奈转换。

除了上述配置，还有一些不罕用的配置，能够查看官网文档。

Polyfill

后面咱们的配置其实是不完满的，转换进去的代码间接在浏览器运行是可能会出问题的。这是因为babel默认只转换了语法，而对于一些新的API是并没有解决的，如Generator、Set、Maps、Proxy、Promise 等全局对象及其办法都不会转码，如果咱们在代码中应用到了就会报错。

此时，咱们就须要做Polyfill，也就是所谓的'垫片'，作用就是把浏览器的差别垫平，人话就是通过模仿为这些浏览器补全缺失的全局对象及API。

@babel/polyfill（废除）

晚期的计划就是@babel/polyfill（晚期的名字是babel-polyfill，外部集成了 core-js 和 regenerator），在入口或者webpack配置的entry中引入@babel/polyfill，此工具会模仿残缺的ES2015 +环境（不蕴含第4阶段的提议），会创立一些全局对象，或者在已有全局对象的原型上补全办法，让咱们能够应用Promise、WeakMap、Array.from等新的API。

比方Array.prototype.includes是ES6的API，就会在Array.prototype下面增加一个本人实现的includes办法来模仿原生的includes。
import '@babel/polyfill'; let include = [1,2,3].includes(1);new Promise((resolve, reject) => {    resolve();});

当初，咱们的代码就能够在低版本的浏览器运行了。不过此计划有一些毛病：

  • 文件体积大：因为@babel/polyfill会把所有API都补全，不论你有没有应用，比方你可能在我的项目中只应用了一个新的API，后果他给你梭哈了，把所有的API都整进去了。所以最初打进去的包会十分大，十分节约。
  • 净化全局变量：@babel/polyfill会在全局创建对象或者批改全局对象的原型链，所以会对全局变量进行净化。

对于第一个毛病，咱们能够应用后面@babel/preset-env提供的useBuiltIns配置，当设置为usage时（须要制订corejs版本），babel会查看咱们的代码，只引入咱们代码中须要的polyfill，这样打包进去的文件就会小很多。

// babel.config.json{  "presets": [    [      "@babel/env",      {        "useBuiltIns": "usage",        "corejs": 3      }    ]  ]}

例如后面的代码：

// import '@babel/polyfill';  应用useBuiltIns: 'usage'时，会主动导入须要的垫片，所以不必再手动引入let include = [1,2,3].includes(1);new Promise((resolve, reject) => {    resolve();});

编译后的代码：

"use strict";require("core-js/modules/es.array.includes");require("core-js/modules/es.object.to-string");require("core-js/modules/es.promise");// import '@babel/polyfill'; let include = [1,2,3].includes(1);new Promise((resolve, reject) => {    resolve();});

咱们能够看到，在文件的头部仅退出了文件中用到的新语法的polyfill，是不是棒棒的了。

不过这并没有完，试想如果很多文件都应用了这些个性，岂不是每个文件都会引入一次，有没有方法改善一下呢？

@babel/plugin-transform-runtime

@babel/plugin-transform-runtime 是一个可重复使用Babel注入的帮忙程序的插件，防止反复注入，以节俭代码大小。通常还要搭配@babel/runtime一起应用。

npm install --save-dev @babel/plugin-transform-runtime npm install --save @babel/runtime # 提供缺失的个性，须要在生产环境中装置
// babel.config.json{  "presets": [    [      "@babel/preset-env",      {        "useBuiltIns": "usage",        "corejs": 3      }    ]  ],  "plugins": [["@babel/plugin-transform-runtime"]]}

如上配置后，一个class转换如下：

// 源码class Foo {  method() {}}
// 转换后import _classCallCheck from "babel-runtime/helpers/classCallCheck";import _createClass from "babel-runtime/helpers/createClass";let Foo = function () {  function Foo() {    _classCallCheck(this, Foo);  }  _createClass(Foo, [{    key: "method",    value: function method() {}  }]);  return Foo;}();

咱们看到，这里并不是采纳全局引入的形式，而是引入了局部变量来替换新的语法，提供了一个沙箱机制，这就顺便解决了下面全局作用域净化的问题。而且这里所有模仿的个性都是从@babel/runtime中引入，而这个包咱们是装置在生产环境中的，并不是会打包到每个文件中，这就使这些polyfill失去了复用，不会打包屡次。

留神：下面的corejs须要为3.0才会齐全转换，如果应用2.0只会转换语法，而不会做polyfill，如果要做的话须要再独自引入@babel/runtime-corejs3来进行解决，举荐应用3.0，所以这里不再赘述。

经验了一波三折，咱们终于搞定了。然而，这不是银弹，将来可能还会呈现其余的计划，对于Polyfill的历史能够去看云谦大佬的Polyfill 计划的过来、当初和将来。

生态

除了下面介绍的货色，babel生态也是十分凋敝，还有很多其余配套的一些工具（名字通常以babel-*或@babel/*结尾），上面咱们大略列举一下：

  • babel-cli：babel提供的命令行工具，提供了babel命令来执行编译工作。
  • babel-register：会在require加载文件前，先用babel进行转码编译，后面说到的运行时编译就是应用此工具。
  • babel-loader：babel为webpack提供的一个loader，也是最常见的应用形式。能够在webpack构建的工程中进行转码编译。
  • babel-polyfill/@babel/polyfill：babel提供的polyfill工具。

babel的存在，让咱们能够突破运行环境语法标准的限度，犹如一台时光机，把咱们带到了将来，让咱们能够用彼时的语法来编写此时的利用，为咱们学习和应用最新的语法扫清了阻碍，俨然babel已成为咱们工程化中必不可少的一个工具。

参考文档：Babel中文网、不容错过的 Babel7 常识、一口(很长的)气理解 babel