[转] webpack中配置Babel

一、安装

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