[Webpack] 我如何实现在高版本浏览器上使用 es6 产物，在低版本上使用 es5【热度: 122】

关键词：Webpack es6 产物

分别打包 ES5 和 ES6 产物（从一份 ES6 源码）

配置 Webpack 和 Babel 基础环境

首先，安装必要的依赖。除了 Webpack 本身相关的依赖外，还需要babel - loader、@babel/core和@babel/preset - env。
```
npm install webpack webpack - cli babel - loader @babel/core @babel/preset - env --save - dev
```

创建 Webpack 配置文件（例如webpack.config.js），并在其中配置基本的模块规则，用于处理 JavaScript 文件。先配置一个简单的 ES6 打包规则：

const path = require("path");
module.exports = {
entry: "./src/index.js", // 假设ES6源码入口文件是index.js
output: {
filename: "es6 - bundle.js",
path: path.resolve(__dirname, "dist/es6"),
},
module: {
rules: [
{
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
   loader: "babel - loader",
   options: {
     presets: [
       [
         "@babel/preset - env",
         {
           targets: {
             // 设置一个较高的浏览器版本支持ES6原生，这里假设现代浏览器都支持
             chrome: "80",
             firefox: "70",
           },
         },
       ],
     ],
   },
 },
},
],
},
};

添加 ES5 打包配置

为了打包 ES5 产物，在 Webpack 配置文件中添加另一个配置对象。可以通过webpack - merge工具（需要安装webpack - merge）来合并基础配置和 ES5 特定配置，避免重复配置。

const path = require("path");
const webpackMerge = require("webpack - merge");
const baseConfig = {
entry: "./src/index.js",
output: {
filename: "es6 - bundle.js",
path: path.resolve(__dirname, "dist/es6"),
},
module: {
rules: [
{
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
   loader: "babel - loader",
   options: {
     presets: [
       [
         "@babel/preset - env",
         {
           targets: {
             chrome: "80",
             firefox: "70",
           },
         },
       ],
     ],
   },
 },
},
],
},
};
const es5Config = {
output: {
filename: "es5 - bundle.js",
path: path.resolve(__dirname, "dist/es5"),
},
module: {
rules: [
{
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
   loader: "babel - loader",
   options: {
     presets: [
       [
         "@babel/preset - env",
         {
           targets: {
             // 设置较低的浏览器版本，确保转换为ES5语法
             chrome: "50",
             firefox: "40",
           },
           useBuiltIns: "usage",
           corejs: 3,
         },
       ],
     ],
   },
 },
},
],
},
};
module.exports = [baseConfig, webpackMerge(baseConfig, es5Config)];

上述配置中，es5Config部分重新定义了输出文件名和路径，并且在babel - loader的选项中，通过@babel/preset - env的targets选项设置了较低的浏览器支持范围，这样就可以将源码转换为 ES5 语法并打包到dist/es5目录下的es5 - bundle.js文件。

区分加载 ES5 还是 ES6 产物
- 使用浏览器特性检测脚本（HTML + JavaScript）
  - 在 HTML 文件（假设是index.html）中，可以添加一段 JavaScript 代码来检测浏览器是否支持 ES6 特性。例如，检测Promise是否存在（Promise是 ES6 的一个典型特性）。
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script>
if (typeof Promise === "undefined") {
 document.write('<script src="dist/es5/es5 - bundle.js"><\/script>');
} else {
 document.write('<script src="dist/es6/es6 - bundle.js"><\/script>');
}
</script>
</body>
</html>
```
  - 这种方法简单直接，但有一定的局限性。如果浏览器对 ES6 的支持不完全（例如，支持部分 ES6 语法但不支持检测的特性），可能会导致加载错误的产物。
- 使用服务端渲染（SSR）或构建时检测（更高级）
  - 如果是在服务端渲染的应用中，可以在服务端根据用户代理（User - Agent）来判断浏览器版本，进而选择加载 ES5 还是 ES6 产物。这需要在服务端代码（例如 Node.js 中的 Express 应用）中进行逻辑处理。
  - 另一种构建时检测的方法是，在构建过程中生成一个包含浏览器支持信息的配置文件。可以使用browserslist工具（@babel/preset - env内部也使用了这个工具来确定目标浏览器）结合一些自定义脚本，在构建时确定目标浏览器范围，然后生成一个配置文件（例如browser - config.json），内容可能是{"supportsES6": true}或者{"supportsES6": false}。在 HTML 文件中，通过读取这个配置文件来加载相应的产物。
```
// 假设这是一个自定义脚本，用于生成browser - config.json
const browserslist = require("browserslist");
const fs = require("fs");
const targets = {
chrome: "50",
firefox: "40",
};
const browsers = browserslist(Object.keys(targets).map((browser) => `${browser} >= ${targets[browser]}`));
const supportsES6 = browsers.some(
(browser) => browser.includes("Chrome >= 80") || browser.includes("Firefox >= 70")
);
fs.writeFileSync("browser - config.json", JSON.stringify({ supportsES6 }));
```
  - 然后在 HTML 文件中：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<script>
const browserConfig = JSON.parse(document.currentScript.getAttribute("data - config"));
if (browserConfig.supportsES6) {
 document.write('<script src="dist/es6/es6 - bundle.js"><\/script>');
} else {
 document.write('<script src="dist/es5/es5 - bundle.js"><\/script>');
}
</script>
<script src="browser - config.json" data - config></script>
</body>
</html>
```

pro-collection / interview-question

[Webpack] 我如何实现在高版本浏览器上使用 es6 产物，在低版本上使用 es5【热度: 122】 #1072

pro-collection / interview-question

[Webpack] 我如何实现在高版本浏览器上使用 es6 产物， 在低版本上使用 es5【热度: 122】 #1072

[Webpack] 我如何实现在高版本浏览器上使用 es6 产物，在低版本上使用 es5【热度: 122】 #1072