在前端开发中，我们常常使用 Babel 来进行代码转码，以便支持 ECMAScript 6（ES6）的新特性。但是，有时候我们会遇到这样的问题：使用 Babel 转码生成的代码出现了 require is not defined 的错误。
问题原因
这个问题的原因是，Babel 默认情况下不支持 CommonJS 的模块加载方式，而 require 就是 CommonJS 的模块加载方式。因此，在 Babel 转码生成的代码中，会出现 require is not defined 的错误。
解决方法
为了解决这个问题，我们可以使用 babel-plugin-transform-es2015-modules-commonjs 这个插件来支持 CommonJS 的模块加载方式。具体步骤如下：
- 安装插件
在项目中安装 babel-plugin-transform-es2015-modules-commonjs 插件：
npm install babel-plugin-transform-es2015-modules-commonjs --save-dev
- 配置
.babelrc文件
在项目的根目录下创建一个 .babelrc 文件，并配置如下：
{
"presets": ["@babel/preset-env"],
"plugins": ["transform-es2015-modules-commonjs"]
}其中，“presets” 表示使用的预设包，这里我们使用 @babel/preset-env，以支持各种浏览器环境；“plugins” 表示使用的插件，这里我们使用 babel-plugin-transform-es2015-modules-commonjs。
- 编译代码
在转码之前，需要先编译代码。在 package.json 文件中添加一个脚本，用于编译代码：
{
"scripts": {
"build": "babel src -d lib"
}
}上面的代码表示，将 src 目录下的代码编译后生成到 lib 目录下。
执行命令：
npm run build
即可进行编译。
示例代码
以下是一个示例代码：
// src/index.js
const foo = require('./foo');
console.log(foo);// src/foo.js module.exports = 'Hello, world!';
上述代码使用了 require 来加载 foo 模块，这在 Babel 转码生成的代码中会出现 require is not defined 的错误。我们可以按照上述步骤来解决这个问题。
总结
Babel 是前端开发中非常常用的工具，通过 Babel 可以将 ES6 的代码转成 ES5 的代码，以便支持各种浏览器环境。但是，在使用 Babel 的过程中，我们也会遇到一些问题。对于本文中介绍的 require is not defined 的错误，我们可以使用 babel-plugin-transform-es2015-modules-commonjs 这个插件来解决。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2103b48841e9894e6398e