对于前端开发者来说，ES6 已经成为一种必备的技能。然而，由于目前大多数浏览器并不完全支持 ES6，因此在实际项目中使用 ES6 代码可能会出现兼容性问题。为了解决这个问题，我们需要使用 Webpack 进行打包，并在打包过程中进行兼容性处理。
Webpack 兼容性处理方案
Webpack 目前支持以下两种方案来解决 ES6 兼容性问题：
Babel 转译
Babel 是一个广泛使用的 JavaScript 转译器，可以将 ES6 代码转换为 ES5 代码，从而让不支持 ES6 的浏览器也能正常运行我们的代码。Babel 提供了一个专门的 Loader——babel-loader，可以与 Webpack 集成使用。
安装和配置 Babel
- 安装 babel-loader 和 @babel/core：
npm install babel-loader @babel/core --save-dev
- 安装所需的插件和预设：
npm install @babel/plugin-transform-runtime @babel/preset-env --save-dev
- 在项目根目录下创建文件
.babelrc，并配置如下：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
--
---------- -
-
----------------------------------
-
--------- -
-
-
-
-使用 webpack-module-strict-exports
webpack-module-strict-exports 是一个专门为解决 ES6 模块兼容性问题而开发的 Loader。它可以让 Webpack 打包生成的代码能够在不支持 ES6 模块的浏览器中正常运行。
安装和配置 webpack-enhanced-resolve
- 安装 webpack-module-strict-exports：
npm install webpack-module-strict-exports --save-dev
- 在 Webpack 配置文件中添加以下代码：
-- -------------------- ---- -------
----- --------------- - ----------------------------
----- ------------------------- - ----------------------------------------------------------
-------------- - -
-------- -
-------- -
--- ----------------------------------
------- ----------
---
--- ------------------------------------
--------------
----------
---
--- -----------------------------------
------- -------------------
--
-
--
------- -
--------------------- ----
--
-------- -
--- ---------------------------
-
--总结
实现 Webpack 打包 ES6 代码的兼容性处理，可以大大提高我们的代码的兼容性和可用性，让更多的用户能够顺利地访问和使用我们的网站或产品。无论是 Babel 转译，还是使用 webpack-module-strict-exports，都是目前行之有效的处理方案。如果您正在使用 ES6，不妨尝试一下这两种方案，相信一定能为您带来很大的帮助。
示例代码：
import { add } from "./math";
const result = add(1, 2);
console.log(result);export function add(a, b) {
return a + b;
}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6490fa5b48841e9894efb9dc