【爬坑日记】使用webpack、babel-loader/babel-polyfill解决ie浏览器不支持es6

最近项目须要兼容ie（真是的万恶的ie..），打包后的项目一直报错，缘由就是ie不支持不少es6的写法，好比箭头函数等。使用babel解决ie兼容也应该是目前大多数都采起的方案。

如下为本身总结的解决过程，如有不对还望多多指正。

babel是什么(官网)

1. 安装依赖

npm install --save-dev babel-core babel-loader@7 babel-preset-env
复制代码

• babel-core：babel的核心包
• babel-loader：babel的loader包
• babel-preset-env：包括支持现代 JavaScript（ES2015，ES2016 等）的全部插件（也能够自定义单一功能插件，详情见官网）

注意：安装babel-loader时，须要指定7.x的版本，不然在打包过程当中会报错，我安装的版本以下

"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
复制代码

2. 在项目工程中，新建一个.babelrc配置文件，内容以下

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}
复制代码

3. 在webpack.config.js中配置babel

module:{
    rules:[
        {
            test:'/\.js$/',
            use:['babel-loader'],
            exclude:/node_module/
        }
    ]
}
复制代码

至此已经用 babel 在构建过程当中转译语法糖，好比说将 ES7/ES6/JSX 中的语法部分（例如箭头函数）转译成 ES5。 但若要使用像 Promise 或 WeakMap 这样的新内置函数，像 Array.from 或 Object.assign 这样的静态方法，像Array.prototype.includes 这样的实例方法，以及 generator 函数等，还须要引入一个 babel-polyfill，须要注意 polyfill 则是解决原生对象的问题，好比说你的浏览器不支持 Promise，babel 就给你建一个 Promise 供你使用。因此，polyfill须要在浏览器运行的，否则怎么把原生对象插进全局变量呢？

4. 安装 babel-polyfill

npm install --save babel-polyfill
复制代码

注意--save选项而不是--save-dev，由于这是一个须要在源代码以前运行的

5. 在webpack项目主入口 js 文件的顶部 import 'babel-polyfill'
6. 更新 .babelrc 文件

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      },
      "useBuiltIns": "usage"
    }]
  ]
}
复制代码

若是咱们没有将 "useBuiltIns" 选项的设置为 "usage" ，就必须在其余代码以前 require 一次完整的 polyfill

如今 webpack 打包后，项目应该是能够正常在ie下正常使用es6了