描述
- webpack对js的配置是去兼容低版本浏览器而生的，可以理解为 将高级语法转为低级语法，包含es6及一些装饰器等。
- 核心方法是 使用
babel-loader插件 。
注意：babel-loader 只不过是 babel 与 webpack 的桥梁，还有两个核心插件@babel/core和@babel/preset-env。@babel/preset-env是一个插件集合，里面包含了许多解析es6语法的插件。babel-loader 会默认调用 @babel/core 转化代码，转化的时候会通过 @babel/presets-env 将es6转为es5。
@babel是作用域的意思，表示所有与babel相关的包都安在@babel下。
使用
在用 babel 解析的时候对 一些还处于草案阶段，以及es7的部分语法 还是需要有特殊处理的。
普通es6语法处理
// webpack.base.js
{
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader']
}
]
}
}
// 在根目录下创建 .babelrc 文件。在Babel执行编译的过程中，会从项目的根目录下的 .babelrc文件中读取配置。.babelrc是一个json格式的文件。
// 在.babelrc配置文件中，主要是对预设(presets) 和 插件(plugins) 进行配置。
// .babelrc
{
"presets": [ // 从下到上执行
"@babel/preset-env" // 插件包，含有很多的插件。
],
// 一个插件往plugins中配置。插件集合往上面配。
"plugins": [ // 从上到下执行
]
}
// .babelrc中的配置也可以在配置loader中一起配
{
test: /\.js/,
use: {
loader: 'babel-loader',
options: { // .babelrc
presets: [
"@babel/preset-env",
"@babel/preset-react"
]
}
}
}
Class （草案阶段语法）
插件： @babel/plugin-proposal-class-properties
// webpack.base.js 配置如上。
// .babelrc
{
"presets": [
"@babel/preset-env"
],
"plugins": [
//给插件传参 loose: true 表示使用宽松模式（this.a=12），并且只能在宽松模式下使用装饰器; false的话使用的是用defaultproperty定义属性。
["@babel/plugin-proposal-class-properties",{"loose": true}] // 解析类class
]
}
/* eg:
class A {
a = 12 // this.a = 12 ( loose: true )
}
*/
解析装饰器
插件：@babel/plugin-proposal-decorators
用法：加载装饰器，如果使用了@babel/plugin-proposal-class-properties，必须用在 @babel/plugin-proposal-class-properties 的前面，并且保证配置 loose 必须是 true 。
自己的参数 legacy 设置为 true。保留以前装饰器的用法。
// webpack.base.js文件如上
{
"presets": [
"@babel/preset-env"
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties",{"loose": true}]
]
}
ES7 上的部分语法
对于一些实例上的语法，是无法被监控到的，promise也是一样，它是无法被转化的。
新版babel中 @babel/preset-env 中的 useBuiltIns 选项，如果你设置了 usage，babel 编绎的时候就不用整个 polyfills , 只加载你使用 polyfills，这样就可以减少包的大小。
想要减少代码，不想让代码重用的话，就需要引入 babel 的运行时：
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
第一个插件会帮我们执行的二个插件；实际上起作用的是 第二个插件。
// webpack.base.js 如上
// babel新版本中 babel-polyfill 已被弃用，用 corejs 替代
{
"presets": [
["@babel/preset-env",{ // 进行配置
"useBuiltIns": "usage", // 按需加载 api（得是新版的babel才有）
"corejs": 2
}]
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties",{"loose": true}],
"@babel/plugin-transform-runtime"
]
}