Question

JavaScript 编译，将浏览器未实现的 ECMAScript 规范语法转化成可运行的低版本语法 。

我们使用 @babel/cli 从终端运行 Babel，利用 @babel/polyfill 来模拟所有新的 JavaScript 功能，而 env preset 只对我们所使用的并且目标浏览器中缺失的功能进行代码转换和加载 polyfill。

1. 安装

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

2. 配置：配置文件有多种，包括.babelrc, .babelrc.js, babel.config.js

   .babelrc：适用于单个软件包的配置

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

​ .babelrc.js： 与 .babelrc 的配置相同，但你可以使用 JavaScript 编写。

const presets = [ ... ];
const plugins = [ ... ];
module.exports = { presets, plugins };

​ babel.config.js ：项目根目录下，可编译 node_modules 目录下的模块。内容如下，

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

module.exports = { presets };

3. 运行此命令将 src 目录下的所有代码编译到 lib 目录：

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