babel

1、babel是什么

2、preset是什么?

包含着一组预先设定的插件，而不是逐一添加我们想要的所有插件，使用的时候也是以数组的形式进行组合。

eg: preset-env

1
2
npm install --save-dev @babel/preset-env
(该预设除了包含所有稳定的转码插件，还可以根据我们设定的目标环境进行针对性转码。除了进行语法转换，该预设还可以通过设置参数项进行针对性语法转换以及polyfill的部分引入。)
1
2
3
4
5
6
7
8
9
10
11
12
{
  "presets": ["@babel/preset-env"],
  "plugins": []
}
{
  "presets": [["@babel/preset-env",{}]],
  "plugins": []
}
{
  "presets": [["@babel/preset-env"]],
  "plugins": []
}

preset-env的重要参数项有：

  • targets

    同browserslist配置（package.json内），只可存在一个，若都不配置，则对所有ES6语法转换成ES5

  • useBuiltIns

    主要影响polyfill的行为，未配置或者为false时，polyfill就会全部引入到代码中。设置为“useage”或者”entry”时，需要引入”core-js”，默认为2，可选新版本3。下文有更多详解

  • modules

    是否把ES6的模块化语法改成其它模块化语法，默认为”auto“。

  • corejs

3、plugins是什么?

转换规则会体现为插件的形式，是小型 JavaScript 程序，它指示 Babel 如何进行代码转换。

eg:箭头函数转换

1
npm install --save-dev @babel/plugin-transform-arrow-functions
1
2
3
4
5
6
7
8
9
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-arrow-functions"
  ]
}

3、useBuiltIns:(false,entry,usage)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "presets": [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "edge": "15",
          "chrome": "60"
        },
        "useBuiltIns": "usage"
      }
    ]
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

**false:**不对 polyfill 做操作。如果引入 @babel/polyfill，则无视配置的浏览器兼容，引入所有的 polyfill。

**entry:**根据配置的浏览器兼容，引入浏览器不兼容的 polyfill。需要在入口文件手动添加 import '@babel/polyfill'（只需要在入口处引入一次），会自动根据 browserslist 替换成浏览器不兼容的所有 polyfill。

usage:usage 会根据配置的浏览器兼容，以及你代码中用到的 API 来进行 polyfill，实现了按需添加。