Babel 入门

Babel与Polyfill的关系和区别
Babel 默认只转换新的 js 句法（syntax），而不转换新的 API，例如箭头函数等
Polyfill 用于实现浏览器并不支持的原生API的代码，如新增的方法等

Babel

Babel的安装，配置

创建 babel.config.js 文件，内容如下

babel.config.js 是Babel执行时会默认在当前目录寻找的Babel配置文件，除了babel.config.js，我们也可以选择用.babelrc或.babelrc.js这两种配置文件

module.exports = {
  presets: ["@babel/env"]
}

安装如下包

npm i -D @babel/cli @babel/core @babel/preset-env

• @babel/cli是Babel命令行转码工具，如果我们使用命令行进行Babel转码就需要安装它。
• @babel/cli依赖@babel/core，因此也需要安装@babel/core这个Babel核心npm包。
• @babel/preset-env这个npm包提供了ES6转换ES5的语法转换规则，我们在Babel配置文件里指定使用它。如果不使用的话，也可以完成转码，但转码后的代码仍然是ES6的，相当于没有转码。

创建 index.js 文件，如下

const fn = (num) => num + 1
new Promise(() => {})

执行命令

npx babel index.js -o output.js

输出结果为

"use strict";

var fn = function fn(num) {
  return num + 1;
};

new Promise(() => {});

可以看到，ES6的箭头函数语法转换成了 ES5 的函数定义语法，但是并没有对ES6的Promise进行转换。因为Babel默认只转换新的 js 语法（箭头函数，解构…），而不转换新的 API。新的API分类两类，一类是Promise、Map、Symbol、Proxy、Iterator等全局对象及其对象自身的方法，例如Object.assign，Promise.resolve；另一类是新的实例方法，例如数组实例方法[1, 2, 3].find((item) => item < 2)

polyfill

安装

npm install --save @babel/polyfill

在 index.js 中引入 import '@babel/polyfill'

执行命令

npx babel index.js -o output.js

输出结果

"use strict";

require("@babel/polyfill");

var fn = function fn(num) {
  return num + 1;
};

new Promise(function () {});

输出结果中 require("@babel/polyfill");

import被编译成了require，如果想要编译出来的模块引入规范还是import，则可以在preset-env的配置项中添加”modules”: false即可

有时候我们项目里并没有用到那么多的新增API，但是 @babel/polyfill 会把所有浏览器环境的的polyfill都引入，整个包的体积就会很大，我们想要对目标环境按需引入相应的polyfill应该怎么办呢，这个时候我们就可以使用 preset-env 的配置项中的 useBuiltIns 属性来按需引入 polyfill。

module.exports = {
  presets: [
    [
      "@babel/preset-env", {
        "modules": false, // 用来设置是否把ES6的模块化语法改成其它模块化语法
        "useBuiltIns": "usage",
      }
    ]
  ]
}

使用useBuiltIns:”usage”后，Babel除了会考虑目标环境缺失的API模块，同时考虑我们项目代码里使用到的ES6特性，且不需要在项目入口处手动引入polyfill

import "core-js/modules/es6.object.to-string.js";
import "core-js/modules/es6.promise.js";

var fn = function fn(num) {
  return num + 1;
};

new Promise(function () {});

可以看到 多了 import "core-js/... 的引用，因为 @babel/polyfil 是由core-js2和regenerator-runtime组成的一个集成包，
Babel 7.4.0 之后已经弃用了 @babel/polyfill，所以core-js官方现在推荐我们使用polyfill的时候直接引入core-js和regenerator-runtime/runtime这两个包完全取代 @babel/polyfil

core-js
babel-polyfill