在前端开发中，Babel 是一个非常常见的工具，它可以将 ES6+ 的代码转换为可以在现代浏览器中运行的 ES5 代码。但是，有些开发者在使用 Babel 编译时会遇到一个问题：“require is not defined”。这个问题是由于 Babel 默认不支持 CommonJS 的 require 语句所导致的。
解决方案
解决这个问题的方法有两种：
方法一：安装 babel-plugin-transform-es2015-modules-commonjs 插件
这个插件可以将 ES6 的模块语法转换为 CommonJS 的模块语法。安装方法如下：
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
然后，在 .babelrc 文件中添加以下配置：
{
"plugins": [
"transform-es2015-modules-commonjs"
]
}这样，Babel 就可以正确地编译 CommonJS 的 require 语句了。
方法二：使用 webpack
如果你使用 webpack 来打包你的代码，那么可以使用 webpack 的 babel-loader 来处理 require 语句。安装方法如下：
npm install --save-dev babel-loader
然后，在 webpack 配置文件中添加以下配置：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-这样，Babel 就会使用 babel-loader 来处理 require 语句了。
示例代码
下面是一个示例代码，演示了如何使用 Babel 编译 CommonJS 的模块语法：
-- -------------------- ---- -------
-- --------
----- -- - --------------
----------------------- ------- ----- ----- -- -
-- ----- ----- ----
------------------
---
-- --------
-
---------- -
-----------------------------------
-
-
-- -----------------
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-总结
在使用 Babel 编译时遇到 “require is not defined” 问题，可以通过安装 babel-plugin-transform-es2015-modules-commonjs 插件或使用 webpack 来解决。这些方法不仅可以解决这个问题，还可以让我们更好地利用 Babel 来编译我们的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65153ec095b1f8cacddad741