babel7使用指南

1、安装软件包

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

　　

2、在项目的根目录创建配置文件babel.config.js

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

module.exports = { presets };

　　现在，env预设将仅加载我们的目标浏览器中不可用的功能的转换插件

3、运行此命令将所有代码从src目录编译为lib

./node_modules/.bin/babel src --out-dir lib

npx babel src --out-dir lib

　　需要npm版本大于5.2，才能使用npx

4、Plugins & Presets

plugins用于指导bable转换的内容，如我们想把箭头函数转换为es5

npm install --save-dev @babel/plugin-transform-arrow-functions

./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

　　

presets是插件的集合，有一个通用的presets 是env

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

./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

　　没有任何配置，此presets将包括支持现代JavaScript（ES2015，ES2016等）的所有插件.

5、Configuration

配置文件babel.config.js可以用来指定presets的内容。见第2步

6、Polyfill

npm install --save @babel/polyfill

　　请注意该--save选项，而不是--save-dev因为这是需要在源代码之前运行的polyfill。

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。举例来说，ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

对于我们来说，我们使用的env预设有一个"useBuiltIns"选项，当设置为"usage"实际应用上面提到的最后一个优化时，您只需要包含所需的polyfills。查看configuration.