一、安装
npm install --save-dev babel-loader babel-core babel-preset-env
二、在webpack.config.js中配置module
|
1
2
3
4
5
6
7
8
9
|
module: { rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader'
}
]
} |
三、新建.babelrc配置文件
如下是vue-cli自动生成的babel配置。如果要配置plugins，需要npm install对应插件和依赖。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
{ "presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
} |
四、polyfill：完整模拟ES2015+
Babel默认只转换新的JavaScript句法，而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。如果想让这些方法运行，就需要使用babel-polyfill，为当前环境提供一个垫片。
npm install --save babel-polyfill
|
1
2
3
4
5
6
7
|
// 方法一：在webpack中引用module.exports = { entry: ["babel-polyfill", "./app/js"]
};// 方法二：在js入口顶部引入import "babel-polyfill";
|