介绍
在 Web 开发中，前端工程师经常使用 Babel 编译 ES6/ES7 等高级代码，以便让它们能够在更广泛的浏览器中得到支持。然而，在使用 Babel 编译 JavaScript 代码时，我们有时经常会遇到一个常见的问题：编译后代码出现 require 未定义的错误。
本文将详细介绍该问题的根本原因并提供解决方法，帮助读者避免这个问题以及更好地使用 Babel。
问题的根本原因
在使用 Babel 编译 JavaScript 代码时，有些 Babel 的插件（如 babel-plugin-transform-es2015-modules-commonjs）会将 import 语句转换成 require 语句，以便让代码在旧版的浏览器中运行。然而，这些转换可能会导致一个问题：编译后的代码中包含了 require 语句，但是 require 函数却未定义。
这是因为，Node.js 自带了 require 函数，但是浏览器中并不支持此函数。因此，在浏览器中运行编译后的代码时，代码会抛出类似 “require is not defined” 的错误。
解决方法
针对上面提到的问题，有以下几种解决方法：
1.使用 Babel 的 browserify/cjs 模式
在使用 Babel 编译 JavaScript 代码时，我们可以指定 browserify/cjs 模式。这种模式会将模块转换成浏览器可识别的 CommonJS 模块格式，从而避免了问题。
示例代码：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- -
----- - ----------
------- -- --
-
--
---------- ----------
--
-
-2.使用 Browserify 或 Webpack 等打包工具
在使用 Babel 编译 JavaScript 代码时，我们可以使用 Browserify 或 Webpack 等打包工具将浏览器端的代码打包成一个文件。这种方法不仅可以解决 require 未定义的问题，而且还可以将多个 JavaScript 文件打包成一个文件，提高页面加载速度。
示例代码：
-- -------------------- ---- -------
-- -----------------
--- ---- - ----------------
-------------- - -
------ ------------
------- -
--------- ------------
----- ----------------------- -------
-
--3.在浏览器中使用 RequireJS 进行模块加载
在使用 Babel 编译 JavaScript 代码时，我们可以使用 RequireJS 进行模块加载。RequireJS 是一个 JavaScript 模块加载器，可以让我们在浏览器中异步加载模块。通过这种方式，我们可以避免 require 未定义的问题。
示例代码：
require(['module1', 'module2'], function (module1, module2) {
// module1 和 module2 的代码在这里执行
});4.使用 script 标签将所需的文件引入页面
在使用 Babel 编译 JavaScript 代码时，我们可以使用 script 标签将所需的文件引入页面。这种方法很简单，但是需要手动管理依赖关系。
示例代码：
-- -------------------- ---- -------
---- ---------- ---
------
-------------
------
------- --------------------------
------- -------------------------
------- ----------------------
-------
-------总结
本文详细介绍了使用 Babel 编译 JavaScript 代码时出现的 require 未定义问题以及解决方法。通过上述指南，我们可以更好地使用 Babel 并避免这个常见的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649155cc48841e9894f572ab