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