个人总结:
const presets = [ [
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage", //只包含你所需要的 polyfill,避免臃肿
},
],
];
module.exports = { presets };复制代码
- 使用 @babel/cli 从终端运行 Babel
npm install --save-dev @babel/core @babel/cli
./node_modules/.bin/babel src --out-dir lib
//这将解析 src 目录下的所有 JavaScript 文件,并应用我们所指定的代码转换功能,然后把每个文件输出到 lib 目录下。复制代码
- env preset 只对我们所使用的并且目标浏览器中缺失的功能进行代码转换和加载 polyfill
npm install --save @babel/polyfill复制代码
我们首先创建一个名为 babel.config.js 的文件,如文章最开始,名为 env 的 preset 只会为目标浏览器中没有的功能加载转换插件
- 利用 @babel/polyfill 来模拟所有新的 JavaScript 功能,
npm install --save @babel/polyfill
注意,使用 --save 参数而不是 --save-dev,因为这是一个需要在你的源码之前运行的 polyfill。复制代码