当我们使用 Babel 编译 ES6+ 代码时，经常会遇到 require is not defined 的问题，这是由于 Babel 只是将 ES6+ 语法转换成了 ES5 语法，但没有引入模块化的解决方案导致的问题。在本文中，我们将探讨如何解决这个问题。
原因分析
ES6+ 中的模块化语法使用的是 import 和 export 关键字，但是在浏览器端还没有完整支持这些语法，因此 Babel 将这些语法转换成了 CommonJS 语法，也就是使用 require 和 module.exports 来管理模块的引用和暴露。
然而，浏览器中并没有 require 和 module.exports 函数，需要通过其他方式来实现相同的功能，例如通过 AMD、CMD 或 ES6 的模块化语法。因此，Babel 编译后的代码在浏览器端会出现 require is not defined 的错误。
解决方案
方案一：使用 browserify 转换代码
由于浏览器并不支持 CommonJS 语法，我们可以使用 browserify 来将 Babel 编译后的代码转换成浏览器可识别的代码，这样就可以使用 require 和 module.exports 函数了。
安装 browserify：
npm install -g browserify
使用 browserify 转换代码：
browserify app.js -o bundle.js
其中 app.js 是 Babel 编译后的代码文件，bundle.js 是转换后生成的文件。
在 HTML 文件中引用转换后的文件：
<script src="bundle.js"></script>
方案二：使用 webpack 转换代码
另一种常见的解决方案是使用 webpack 来管理模块的引用和加载，通过配置 webpack 的 loader 来处理 Babel 编译后的代码。
安装 webpack 和相关的 loader：
npm install --save-dev webpack webpack-cli babel-loader
在 webpack.config.js 中配置 loader：
-- -------------------- ---- -------
-------------- - -
------ -----------
------- -
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
--其中 entry 是 Babel 编译后的代码文件，output 是转换后生成的文件名。module 中的 rules 用来匹配需要处理的文件，使用 babel-loader 来处理符合条件的文件。
在 HTML 文件中引用转换后的文件：
<script src="bundle.js"></script>
示例代码
下面是一个简单的示例，使用 Babel 编译后无法在浏览器端运行，需要使用以上提到的方案来解决问题。
app.js
const greeting = require('./greeting');
console.log(greeting('world'));greeting.js
function greeting(name) {
return `Hello, ${name}!`;
}
module.exports = greeting;总结
通过以上探讨，我们了解了 Babel 编译后 require is not defined 的原因，并提供了两种解决方案，让我们能够在浏览器端使用 Babel 编译后的代码。遇到这种问题时，我们可以根据具体情况选择合适的解决方案来解决问题，提高我们的前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e55359f6b2d6eab30c2c34