描述
- 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"
]
}