作用
使用ES6编写js语法时,由于有些浏览器不支持,故需使用babel插件将ES6转换为ES5。
安装
webpack 3.x | babel-loader 8.x | babel 7.x
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack --save-dev
webpack 3.x babel-loader 7.x | babel 6.x
npm install babel-loader babel-core babel-preset-env webpack --save-dev
我这里用第一种。
配置
webpack.config.js
{
test: /\.js$/,
loader: ['babel-loader'],
exclude: /node_modules/
}
新建.babelrc文件,并写入babel的配置,webpack会依赖此配置文件来使用babel编译ES6代码
{
"presets": ["@babel/preset-env"]
}
或者不使用.babelrc文件,直接加在webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
添加配置
1、babel会在每个文件都插入辅助代码,使得体积过大,可以引入 babel runtime 作为一个独立模块,来避免重复引入。
npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime --save
2、‘modules’:false:设置模块引用规则,可以设置成"amd" | “umd” | “systemjs” | “commonjs” | false, defaults to “commonjs”,设置了false,就是用es6以上默认的规则。
3、targets.browsers:设置兼容的浏览器范围
4、“comments”: false 删除已编译代码的注释
.babelrc完整版
{
"presets": [
["@babel/preset-env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"plugins": ["@babel/transform-runtime"],
"comments": false
}
https://www.jianshu.com/p/0dc3bddb6da8?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
https://babeljs.io/docs/en/babel-preset-stage-2/
https://www.webpackjs.com/loaders/babel-loader/