在使用 Webpack 进行前端项目打包时，有时可能会遇到 "Module not an ECMAScript module" 错误，这通常意味着 Webpack 无法识别被导入的模块。这个错误可能会让你困惑，但它的解决方案还是很简单的。
产生错误的原因
在大多数情况下，这个错误是由于尝试导入非 ES 模块所致。具体来说，这个错误可能是由以下几种情况引起的：
- 导入了一个 CommonJS 模块，而 Webpack 正在解析 ECMAScript 模块。
- 导入了一个 UMD 模块（例如 moment.js），该模块不明确地表明了它支持 CommonJS 和 AMD 模块。
- 导入了一个类似于 jQuery 的全局库，该库没有使用模块标准封装，所以无法被 Webpack 识别。
解决方案
要解决这个错误，需要根据实际情况采取不同的措施。下面是几种常见的解决方法。
1. 使用 Webpack 的 esModuleInterop 选项
如果你的项目中使用了第三方模块，而这些模块并不是 ES 模块，你可以尝试打开 Webpack 的 esModuleInterop 选项。这个选项会尝试将所有 CommonJS 模块转换为 ES 模块。在大多数情况下，这个选项可以解决 "Module not an ECMAScript module" 错误。
修改 module.exports 的方式如下：
-- -------------------- ---- -------
-------------- - -
-- -------
-------- -
-- ---- --- --
----------- --------
-- -- ----- -- ------ --
------ -
---- ----------------------- -------
--
--
------ -----------------
------- -
-- ---
--
------- -
------ -
-- ---
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ----------------------
-------- -
----------------------------------
------------------------------------------
--
--
--
--
--
--
-- ------
-- ------------------------
-- --------------------------
-- -----------------------------------
-- -----------------------------------
-- ----------------------------
-- -------------------------
-- ----------------------------------------------------- -------------------------------------------------------
-- --------------------------------
-- ------------------------------------------
-- --------- ------------------------------------------------
-- --------------------------
-- ------------ -----------
-- ----------------------------------------------------------------------
-- -------------------------------------------------------------------
-- -------------------------------------
-- -------------------------------------------
-- ---------------------------------
------------ -
--- ----- ------------------------- ------
- -------- -------------------
- ---------- - ------ - - ----- -------- ----- -------------- - - ----
--
-------------- -----
------ -----
--
-- ----------------------
-- --------------------- ------
-- -------------------------
-- -------------------------------
-- ---------------------------------------------
-- -------------------------------------------------------------------
--------------- -
-- ---------------------
-- ------------------------- ----- ------- ----- ---------------- ---------------
-- ----------------------------- - ---------------------- - ------------------------- - ------------
--------- ----------
-- -----------------------------
-- ---------
-- ---------- ---------------------- - ------ --------
-- ------------------------------------
-- ---- ------------
-- ---- ------- ------ -----------------------------
-- ---- ----------------------
-------- -------
-- ---------------------------
-- --------------------------------------
-- ----------------------------
-- -----------------------------------
---------- ------
-- ----------
-- -----------------
------- -------
--
-- -------------------------------------
------------- -
--- ----- --------------
- ------ -------------------------------------------
- ---------------------------------
- --------------------------------------
- -------------------------------------------------------------
- ---------------------
- -------------------------------------------------------------------------------------------
--
------------- -
----- ---------- -- ----------------------------------
--
--- ----- ----------------------------
- -----------------------------------------------------
--
----------- ------
-- ---------------------------
-- ---------------------------------------------------
------------ -
------- ------
--
--
-- ---
--你也可以在 package.json 中配置该选项：
-- -------------------- ---- -------
-
------- -------------
---------- --------
-------- -
---------- -
-------------------
--
---------- -
----------------------------------
-----------------------------------------
-
--
---------- -
------------------ ----
-
-2. 对于导入的 UMD 模块，尝试使用 imports-loader
有些 UMD 模块会支持 CommonJS 和 AMD 模块的导入方式。如果你使用的是这样的模块，你可以尝试使用 Webpack 的 imports-loader，手动将该模块作为 CommonJS 模块导入。
// 在 module.rules 中添加以下规则
{
test: require.resolve('some-umd-module'),
use: 'imports-loader?define=>false'
},3. 对于全局库，使用 ProvidePlugin
如果你使用的是全局库，可以尝试使用 Webpack 的 ProvidePlugin，将该库作为模块的全局变量提供。
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-- -------
-------- -
--- -----------------------
-- ---------
------- ---------
---------------- --------
--
-
--总结
"Module not an ECMAScript module" 错误出现时，通常是由于无法识别被导入的模块所致。不过解决这个问题的方法还是很简单的，只需根据具体情况采取对应的解决方案即可。对于开发者来说，这个问题的解决不仅可以让项目顺利打包，更能够帮助我们更深入了解 Webpack 的工作原理，提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ed4eabf6b2d6eab377396e