Babel入门

Babel是一个工具链，主要用于把ES6+的代码转换为ES5代码，以便在旧版本浏览器中运行。Babel可以做的事情是

1.语法转换

2.通过Polyfill的方式在目标环境中添加缺失的特性（通过@babel/polyfill模块）

3.源码转换

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

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

安装Babel

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

@babel/core 是Babel的核心库，@babel/cli 是能在终端使用的工具，@babel/preset-env 是一个预设，预设是一组插件的集合。

插件就是一段js程序，用于指导Babel如何转换代码，例如@babel/plugin-transform-arrow-functions插件可以转换箭头函数语法，由于需要转化的语法非常多，所以将一系列插件组合成一个预设来使用，例如@babel/preset-env预设可以支持转换所有js新特性。你也可以使用一个配置文件来指导代码如何进行转化，例如下面的babel.config.js文件告诉Babel只为目标浏览器中没有的功能加载转换插件。

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
    },
  ],
];

module.exports = { presets };

@babel/polyfill 模块包括 core-js 和一个自定义的 regenerator runtime 模块用于模拟完整的 ES2015+ 环境（上面babel插件只是对新的js语法特性进行转换而不包括一些新的api和Promise新对象等）。polyfill实现这些功能的方式是将Promise之类的新的内置组件和Array.from和Object.asign之类的静态方法添加到全局范围和和内置的原型中。我们在实际使用时不回用到这么多方法，所以会产生很大的浪费。

辛运的是env 预设提供了useBuiltIns配置参数，当此参数值是usage时只会加载所需要的polyfill，配置如下

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
];

module.exports = { presets };

注意，使用 --save 参数而不是 --save-dev，因为这是一个需要在你的源码之前运行的 polyfill。

如上所示，配置参数时，将插件或预设名和参数对象组成的数组放入presets数组中即可。这里只需要插件名即可而不需要完整的路径，因为在npm中babel会自动在node_modules找那个查找。下面三种方式是等小的

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