Appearance
转化 es5 语法
1 es6 转换
首先在 index.js 中我们写一段 es6 代码
javascript
let fn = () =>{
console.log('====================================');
console.log(1);
console.log('====================================');
}
fn();
1
2
3
4
5
6
2
3
4
5
6
安装 loader 插件
bash
yarn add babel-loader @babel/core @babel/preset-env
1
javascript
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader',
options:{ // 用babel-loader 需要把es6-es5
presets:[
'@babel/preset-env'
]
}
}
}]
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
我们在写上 es7 的语法
javascript
class App {
a=1
}
1
2
3
2
3
然后你就报错了
bash
yarn add @babel/plugin-proposal-class-properties
1
bash
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options:{ // 用babel-loader 需要把es6-es5
presets:[
'@babel/preset-env'
],
plugins:[
'@babel/plugin-proposal-class-properties'
]
}
}]
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
2 es7/es8 转换
1 plugin-proposal-decorators
shell
npm install --save-dev @babel/plugin-proposal-decorators
1
配置
shell
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
1
2
3
4
5
6
2
3
4
5
6
2 babel/plugin-transform-runtime
这时候就需要 polyfill 来转转化这些 API babel 转译语法需要一些 plugin 如 react,es2015,stage-0,stage-1 等等 其中的 es2015 表示 babel 会加载 es6 相关的编译模块，然后 stage-0 表示的是什么呢？ stage 系列集合了一些对 es7 的草案支持的插件，由于是草案，所以作为插件的形式提供。
* stage-0 - Strawman: just an idea, possible Babel plugin.
* stage-1 - Proposal: this is worth working on.
* stage-2 - Draft: initial spec.
* stage-3 - Candidate: complete spec and initial browser implementations.
* stage-4 - Finished: will be added to the next yearly release.
1
2
3
4
5
2
3
4
5
stage 是向下兼容 0>1>2>3>4 所包含的插件数量依次减少
babel polyfill 有三种：
* babel-runtime
* babel-plugin-transform-runtime
* babel-polyfill
1
2
3
2
3
1 用法
shell
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
1
2
2
javascript
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
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
配置完成后打包会出现这样一个报错，原因是
javascript
include:path.resolve(__dirname,'src'),
exclude:/node_modules/ // 排除掉node_modules
1
2
2
展示一下全部的代码
javascript
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options:{ // 用babel-loader 需要把es6-es5
presets:[
'@babel/preset-env',
],
plugins:[
[
"@babel/plugin-proposal-decorators", {
"legacy": true
}],
[
"@babel/plugin-proposal-class-properties", {
"loose": true
}],
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
],
include:path.resolve(__dirname,'src'), // 加载目录
exclude:/node_modules/ //出去目录
}
}
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
babel 编译时只转换语法，几乎可以编译所有时新的 JavaScript 语法，但并不会转化 BOM 里面不兼容的 API
比如 Promise,Set,Symbol,Array.from,async 等等的一些 API
主要功能：
- 避免多次编译出 helper 函数：
Babel 转移后的代码想要实现和原来代码一样的功能需要借助一些帮助函数，比如：
这个插件的默认配置默认用户已经提供了所有 polyfillable APIs，因此想要无缝使用不污染全局环境的内建功能需要特别标明 corejs。
* 当你使用generators/async方法、函数时自动调用babel-runtime/regenerator
* 当你使用ES6 的Map或者内置的东西时自动调用babel-runtime/core-js
* 移除内联babel helpers并替换使用babel-runtime/helpers来替换
1
2
3
2
3
2 transform-runtime 优点
* 不会污染全局变量
* 多次使用只会打包一次
* 依赖统一按需引入,无重复引入,无多余引入
1
2
3
2
3
3 transform-runtime 缺点
* 不支持实例化的方法Array.includes(x) 就不能转化
* 如果使用的API用的次数不是很多，那么transform-runtime 引入polyfill的包会比不是transform-runtime 时大
1
2
2
总的来说一句话，你可以使用内置的一些东西例如 Promise,Set,Symbol 等，就像使用无缝的使用 polyfill, 来使用 babel 特性，并且无全局污染、极高代码库适用性。 虽然这种方法的优点是不会污染全局，但是，实例的方法
Array.prototype.includes();
babel-polyfill
babel-polyfill 则是通过改写全局 prototype 的方式实现，比较适合单独运行的项目。
开启 babel-polyfill 的方式，可以直接在代码中 require，或者在 webpack 的 entry 中添加，也可以在 babel 的 env 中设置 useBuildins 为 true 来开启。
但是 babel-polyfill 会有近 100K， 打包后代码冗余量比较大， 对于现代的浏览器，有些不需要 polyfill，造成流量浪费 污染了全局对象