一、安装

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" ;