webpack-babel配置-兼容低版本浏览器

1.webpack-ES6语法处理

在企业开发中为了兼容一些低级版本的浏览器, 我们需要将ES678高级语法转换为ES5低级语法
否则在低级版本浏览器中我们的程序无法正确执行，默认情况下webpack是不会将我们的代码转换成ES5低级语法的, 如果需要转换我们需要使用babel来转换

2.如何使用babel?

https://babeljs.io/
2.1安装转换到ES5的相关包

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

2.2配置babel

{
    test: /\.js$/,
    exclude: /node_modules/,  // 不做处理的目录
    loader: "babel-loader",
    options: {
        presets: ["@babel/preset-env"],
    },
}

3. presets优化:

在实际企业开发中默认情况下babel会将所有高于ES5版本的代码都转换为ES5代码
但是有时候可能我们需要兼容的浏览器已经实现了更高版本的代码, 那么这个时候我们就不需要转换
因为如果浏览器本身已经实现了, 我们再去转换就会增加代码的体积,就会影响到网页的性能
所以我们通过配置presets的方式来告诉webpack我们需要兼容哪些浏览器
然后babel就会根据我们的配置自动调整转换方案, 如果需要兼容的浏览器已经实现了, 就不转换了
https://babeljs.io/docs/en/babel-preset-env

presets: [["@babel/preset-env",{
            targets: {
                "chrome": "58",
                "ie": "10"
            },
        }]],

4.利用babel实现低版本语法

对于有对应关系的语法而言, 经过我们上节课的配置就已经能够实现自动转换了
但是对于没有对应关系的语法而言, 经过我们上节课的配置还不能实现自动转换
什么叫有对应关系, 什么叫做没有对应关系?
有对应关系就是指ES5中有对应的概念, 例如: 箭头函数对应普通函数, let对应var, 这个就叫做有对应关系
没有对应关系就是指E5中根本就没有对应的语法, 例如Promise, includes等方法是ES678新增的
ES5中根本就没有对应的实现, 这个时候就需要再增加一些额外配置, 让babel自己帮我们实现对应的语法

4.1安装不存在代码的实现包

npm install --save @babel/polyfill

4.2在用到不存在代码的文件中导入包
import “@babel/polyfill”;
注意点:
如果导入了polyfill,那么无论我们有没有用到不存在的语法都会打包到文件中
但是这样会增加打包后文件的大小, 我们希望的是只将用到的不存在语法打包到文件中
那么就需要在webpack.config.js中再配置一下

presets: [["@babel/preset-env",{
            targets: {
                "chrome": "58",
                "ie": "10"
            },
            useBuiltIns: "usage" //这样配置之后就不用在文件中导入import "@babel/polyfill";
        }]]

5.直接在文件中导入polyfill模块的弊端

直接导入polyfill的方式只适用于一般项目开发, 但是如果是在编写一些第三方模块的时候这种方式会出现一些问题
因为这种方式是通过全局变量的方式来注入代码, 会污染全局环境. 所以我们再来看一下polyfill的第二种配置方式

5.1第二种配置方式

安装相关模块

npm install --save @babel/polyfill
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

配置相关信息

plugins: [
    ["@babel/plugin-transform-runtime",
        {
            "absoluteRuntime": false,
            "corejs": 2,
            "helpers": true,
            "regenerator": true,
            "useESModules": false
        }
    ]
]

注意点:
“corejs”: false, 还是全局注入,还是会污染全局环境
“corejs”: 2, 则不会污染全局环境
还需安装：

npm install --save @babel/runtime-corejs2

// 转换前

function sleep(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, ms)
  })
}
// "corejs": false转换后
require("core-js/modules/es6.promise");  // 全局引入

function sleep(ms) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve();
    }, ms);
  });
}

// "corejs": 2转换后
var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
var _promise = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/promise")); // 独立变量, 局部引入
function sleep(ms) {
  return new _promise.default(function (resolve, reject) {
    setTimeout(function () {
      resolve();
    }, ms);
  });
}

6.babel-使用技巧

6.1查看错误提示
6.2根据错误信息查询文档
6.3根据文档缺什么安装配置什么