一、why babel ?
babel：JavaScript Compiler 将ES5+的代码转换为浏览器可执行的代码，主要做了以下事情:
- 语法转换
- 提供新语法特性的修补，比如promise、iterators、symbols等
- 源码转换
- …
babel是一个工具链，由很多插件组成，以下是主要用到的几个插件:
1、@babel/core
Babel的核心功能模块
2、@babel/polyfill
3、@babel/preset-env
4、@babel/cli
二、插件和预设
插件 plugins
插件决定了babel转换代码的规则
i.e:
@babel/plugin-transform-arrow-functions 将箭头函数转换为普通函数
@babel/plugin-proposal-class-properties 转换class属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| class SafeUser {
password = generateStrongPassword()
speak = () => {
console.log('speaking')
}
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });
} else {
obj[key] = value;
} return obj;
}
class SafeUser {
constructor() {
_defineProperty(this, "password", generateStrongPassword());
_defineProperty(this, "speak", function () {
console.log('speaking');
});
}
}
|
预设 presets
简单理解：一个preset即为一组预先设定的插件
i.e: @babel/preset-env 包含的插件支持所有最新的JavaScript特性(ES2015,ES2016等)
1
2
3
4
5
6
7
8
9
10
11
| const presets = [
[
"@babel/preset-env",
{
targets: {
edge: "17",
chrome: "67"
}
}
]
]
|
三、Polyfill
