【webpack5】低版本浏览器兼容ES6+解决方案_webpack5兼容低版本浏览器的写法

【webpack5】低版本浏览器兼容ES6+解决方案

一、垫片

@babel/preset-env

• 依赖

npm install @babel/preset-env -D
npm install core-js --save
1
2

1、全局引用

• 配置

// .babellrc
{
  "presets": [
    "@babel/preset-env"
  ]
}

1
2
3
4
5
6
7

• JS引用

// js文件入口,如 index.js

// 引入全局垫片
import "core-js/stable";
// // 被@babel/preset-env 的依赖引入的，polyfill。使得支持yield
import "regenerator-runtime/runtime";

[123].includes(123)
1
2
3
4
5
6
7
8

2、按需引入(推荐)

// .babellrc
{
  "presets": [
    ["@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 }]
  ]
}

1
2
3
4
5
6
7

• JS引用（无需手动引入垫片）

// js文件入口,如 index.js
[123].includes(123)
1
2

• 经过webpack后输出

// 因为数组用到includes，所以自动打包加入includes垫片
require("core-js/modules/es.array.includes.js")
[123].includes(123)
1
2
3

相比第一种方式的好处是不用全局引入，减少输出后的代码量

二、构建代码替换关键方法（推荐）

@babel/plugin-transform-runtime

• 依赖

npm install @babel/plugin-transform-runtime -D

npm install @babel/runtime-corejs3 --save
1
2
3

• 配置

// .babellrc
{
  "presets": [
    "@babel/preset-react",
    // 处理ES6+语法
    "@babel/preset-env"
  ],
  "plugins": [
    // 处理ES6新功能非垫片实现
    ["@babel/plugin-transform-runtime",{"corejs": 3 }]
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13

• 入口

// js文件入口,如 index.js
[123].includes(123)
1
2

• 构建输出代码
  将原生Array.prototype.includes使用方式替换成工具方法来实现同样的功能

_babel_runtime_corejs3_core_js_stable_instance_includes__WEBPACK_IMPORTED_MODULE_0___default()(_context = [123, 333]).call(_context, '22')
1

好处是不会污染全局代码，不足的是会引入比较额外的代码输出。

• 这里有个坑注意下

新IE环境下使用import('./util.js').then() 异步加载代码会报错

Unhandled promise rejection ReferenceError: “Promise”未定义
1

原因是浏览器实现了Promise，但是这个Promise跟别人不一样。
我们仅需要在入口加

if(浏览器 == IE){
    window.Promise = Promise;
}
1
2
3

这样IE就完美支持import()了，但是污染了Promise

三、@babel/polyfill(已废弃)

总结

当我们应用跟其他系统没有互相嵌套的情况下，建议使用垫片按需引入,否则建议使用二 、构建代码替换关键方法。

举个例子：

1、代码运行在其他类似医院挂号机下，随便改动内置对象的原型、window的对象会影响其他应用或者被其他应用影响；

2、我们应用注入第三方功能，如百度统计、站长统计,鬼知道会不会跟他们冲突呢

根据实际制定方案才是明智的做法。 – 我说的

备注：

本文使用当前（20210129）最新版本webpack@5 babel-loader@8。

参考：

https://www.babeljs.cn/

https://webpack.docschina.org/concepts/

- 依赖
{
  "dependencies": {
    "@babel/runtime-corejs3": "^7.12.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "webpack": "^5.14.0",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3",
    "webpack-parallel-uglify-plugin": "^2.0.0"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17