babel
环境搭建& 基本配置 babel-polyfill babel-runtime
环境搭建 .babelrc配置
{
"presets": [ // plugin集合,做的预设
[
"@babel/preset-env",
...
]
],
"plugins": [
...
]
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# babel-polyfill 是什么
什么是 Polyfill
core-js 和 regenerator 的集合
- 语法补充
core-js 和 regenerator
按需引入
// presets [ "@babel/preset-env", // 按需引用 { "useBuiltIns": "usage", "corejs": 3 } ]
1
2
3
4
5
6
7
8
9
10
preset: 和 plugins
# babel-polyfill 的问题
- 会污染全局环境
- 如果做一个独立的 web 系统,则无碍
- 如果做一个第三方 lib,则会有问题
# babel-runtime
babel-runtime 就能解决以上的问题
安装
{
"devDependencies": {
"@babel/cli": "^7.7.5",
"@babel/core": "^7.7.5",
"@babel/plugin-transform-runtime": "^7.7.5",
"@babel/preset-env": "^7.7.5"
},
"dependencies": {
"@babel/polyfill": "^7.7.0",
"@babel/runtime": "^7.7.5"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
配置。babelrc
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 3,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
上次更新: 2023/09/17, 16:36:29