传统web项目配置babel@7自动兼容ES6语法

First Post:

Last Update:

安装babel@7

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

在项目的根目录下创建一个命名为 babel.config.js 的配置文件

默认配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
];
module.exports = { presets };

支持市场份额超过5%的浏览器：

1
2
3
"targets": {
  "browsers": "> 5%"
}

支持最后两个版本的浏览器以及IE7+：

1
2
3
"targets": {
   "browsers": ["last 2 versions", "ie >= 7"]
}

监听转化

在需要转化的文件目录执行：

1
npx babel --presets=@babel/env --root-mode upward shangpu_list_map.js --watch --out-file shangpu_list_map.min.js

PS：若提示命令不存在，请全局安装babel-cli

≡