一、安装
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"; |