webpack中配置Babel

　　Babel是一个javascript编译器，可以将ES6和更新的js语法转换成ES5的，使代码在较老的浏览器里也能正常运行。

一、安装

npm install --save-dev babel-loader babel-core 
babel-preset-env

二、在webpack.config.js中配置module

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader'
    }
  ]
}

三、新建.babelrc配置文件

　　如下是vue-cli自动生成的babel配置。如果要配置plugins，需要npm install对应插件和依赖。

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

// 方法一：在webpack中引用
module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

// 方法二：在js入口顶部引入
import "babel-polyfill";

　

更多专业前端知识，请上 【猿2048】www.mk2048.com