目录
es6高级语法转换四（异步语法generater、promise）
es6高级语法转换一 （箭头函数等）
安装插件
yarn add babel-loader @babel/core @babel/preset-env -D说明：
babel-loader 转换加载器
@babel/core Babel的核心模块，可以调用transform方法进行源代码的转换
@babel/preset-env 转换模块，告诉transform 如何转换（es6转换为es5）
配置
module:{
rules:[
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{ //用babel-loader 把es6 --> es5
presets:[
'@babel/preset-env'
]
}
}
}
]
}es6高级语法转换二（class等）
安装插件
yarn add @babel/plugin-proposal-class-properties -D配置
module:{
rules:[
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{ //用babel-loader 把es6 --> es5
presets:[
'@babel/preset-env'
],
plugins:[
'@babel/plugin-proposal-class-properties'
]
}
}
}
]
}es6高级语法转换三（装饰器）
安装插件
npm install --save-dev @babel/plugin-proposal-decorators设置
{
"assumptions": {
"setPublicClassFields": true
},
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties"]
]
}es6高级语法转换四（异步语法generater、promise）
安装插件
npm install --save-dev @babel/plugin-transform-runtime生产环境也需要 ，所以不用加 -dev
npm install --save @babel/runtime配置
module:{
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"],
"@babel/plugin-transform-runtime"
]
}
},
include:path.resolve(__dirname,'src'),
exclude:/node_modules/
}
]
}es6高级语法转换五（includes等方法）
安装插件
yarn add @babel/polyfill使用时，只需要在页面引入
import "@babel/polyfill";
//require("@babel/polyfill");以上就是全部支持高级语法转换低级语法的插件及配置，更详细的配置可以查看babel官网的文档说明。