在使用 Babel 编译 ES6 代码时，经常会遇到 require 函数无法被正确解析的问题。这是因为 require 是 CommonJS 规范中的模块加载函数，在 ES6 中并不是一个原生的关键字，需要通过插件才能实现对其的支持。
以下是一个代码示例：
------ -- ---- ----- ----- ---- - ------------------------------ -------- ------------------
在编译过程中，Babel 默认会将所有的 ES6 模块语法转换成 CommonJS 规范的代码，并且将其中的 import 语句转换成 require 函数。但是，在有些情况下，Babel 生成的代码中 require 函数无法被正确解析，例如：
----------------- -------- -------- -
----- -- - --------------
----- ---- - ------------------------------ --------
------------------
---在这种情况下，如果你直接在浏览器运行该代码，则会抛出“require is not defined”的错误。
如何解决这个问题呢？下面我们提供两种解决方案：
方案一：使用 @babel/plugin-transform-modules-systemjs 插件
在 .babelrc 或 babel.config.js 配置文件中添加如下内容：
-
---------- -
-------------------------------------------- -
--------------- ---------
------------------------ ----
--
-
-该插件可以将 ES6 模块语法转换成 SystemJS 规范的代码。使用该插件后，上述代码将被转换为：
--------- -------- -------- -
------------------- -------- --------- --------- -
---- --------
--- ---
------ -
-------- ---
-------- -------- -- -
-- - --------------------------
----- ---- - ------------------------------ --------
------------------
-
--
---
---需要注意的是，在使用该插件时，必须将 systemGlobal 设为 System。
方案二：使用 esm 模块加载器
除了使用 Babel 插件外，另一种解决方案是使用 esm（ECMAScript modules）模块加载器，可以将 ES6 模块语法直接加载到浏览器中。
在 Node.js 中，您可以通过以下方式安装 esm 模块加载器：
--- ------- ---
然后，在运行 Node.js 代码之前，需要添加一行代码来启用 esm：
------- - ----------------------
这样，你就可以直接使用 ES6 的模块语法了:
------ -- ---- ----- ----- ---- - ------------------------------ -------- ------------------
需要注意的是，在使用 esm 时，必须使用 ECMAScript 模块语法。
总结：
以上是两种解决 Babel 编译 ES6 后无法识别的 require 问题的方案。使用第一种方案需要添加 Babel 插件，而第二种方案则需要安装 esm 模块加载器。具体的选择取决于您应用程序的实际情况。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651b726195b1f8cacd31b27d