什么是 Babel？
Babel 是一个 JavaScript 编译器，可以将新版 JavaScript 代码转换为 ES5 代码，让开发者可以使用最新的语言特性，同时也能兼容多种浏览器和旧版操作系统。Babel 可以通过插件的形式扩展其功能，支持各种转换和处理。
问题背景
在使用 Babel 编译 ES6 代码的过程中，可能会遇到 require is not a function 的错误。
下面是一个简单的示例：
// script.js
const lodash = require('lodash');使用 Babel 编译后，代码变成了这样：
// script.js
'use strict';
var _lodash = _interopRequireDefault(require('lodash'));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }当我们在浏览器或 Node.js 中执行该代码时，会报错：
Uncaught TypeError: require is not a function
问题分析
这个问题主要是因为 Babel 转换模块引入时，将 CommonJS 规范的 require 函数转换成了 ES6 的 import 语句，但是在浏览器或 Node.js 中并没有 require 函数，因此会报错。
根据上面的示例，我们可以看到，Babel 将 require 转换成了 _interopRequireDefault 函数，这是因为 Babel 默认使用了 @babel/preset-env 插件，该插件会根据目标环境自动使用需要的转换规则。在这种情况下，Babel 使用了 @babel/plugin-transform-modules-commonjs 插件来将 ES6 模块转换成 CommonJS 模块，从而使用 require 函数来引入模块。
解决方案
解决这个问题的方法有以下两种：
1. 手动引入 require
将 Babel 转换后的代码中的 _interopRequireDefault 函数替换成 require 函数即可，示例代码如下：
// script.js
'use strict';
var _lodash = require('lodash');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }在浏览器端代码中，如果在引入外部库时使用 CommonJS 规范，可以手动引入 require 函数：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const Vue = window.Vue || require('vue');
// ...
</script>2. 使用 Webpack
Webpack 是一个 JavaScript 应用程序打包工具，可以将预处理、打包、优化和管理资源自动化，让开发者专注于编写代码。
使用 Webpack 配置一个类似以下的 webpack.config.js 文件：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
-- ---
-然后使用 require 函数引入模块，Webpack 会根据配置自动处理模块的引入和转换：
const lodash = require('lodash');总结
Babel 是一个非常强大的 JavaScript 编译器，在使用时需要注意代码转换的规则和目标环境。当遇到 require is not a function 的错误时，可以手动引入 require 函数或者使用 Webpack 对模块的引入和转换进行处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469da65968c7c53b09a64e9