在前端开发中，我们经常会使用到 ESLint 这个工具来帮助我们检查代码的规范性和错误。但是有时候我们会遇到这样的报错提示：require is not defined，这是什么意思呢？该怎么解决呢？本文将会对此进行详细的解释和指导。
什么是 require？
在 Node.js 中，我们经常会使用 require 函数来引入模块。例如：
const fs = require('fs');这行代码就是引入了 Node.js 内置的 fs 模块。而在浏览器端，我们也可以使用 require 函数来引入模块，但是需要使用一些工具来实现，例如 webpack 和 Browserify 等。
为什么会报错：require is not defined？
在浏览器端，require 函数并不是原生支持的。因此当我们在浏览器端使用 require 函数时，就会出现 require is not defined 的错误提示。
例如：
const $ = require('jquery');这行代码就会导致报错：require is not defined。
如何解决？
要解决这个问题，我们需要使用一些工具来将 require 函数转换成浏览器端支持的代码。常见的工具有 webpack 和 Browserify 等。
以 webpack 为例，我们需要在项目中安装 webpack 和 webpack-cli：
npm install --save-dev webpack webpack-cli
然后在项目的根目录下创建一个 webpack.config.js 文件，内容如下：
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js'
}
};这个配置文件的作用是将我们的代码打包成一个 bundle.js 文件，其中包含了所有的依赖和代码。
接下来我们需要在项目中安装一些依赖：
npm install --save-dev babel-loader @babel/core @babel/preset-env
这些依赖是用来将 ES6 代码转换成 ES5 代码的。在 webpack.config.js 中添加以下代码：
// javascriptcn.com 代码示例
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};这个配置文件的作用是在打包时使用 babel-loader 来将 ES6 代码转换成 ES5 代码。
最后，在项目中安装 jquery：
npm install --save jquery
然后在 index.js 中引入 jquery：
const $ = require('jquery');最后执行 webpack 命令来打包代码：
npx webpack
打包完成后，在浏览器中打开 index.html 文件，就不会出现 require is not defined 的错误提示了。
总结
ESLint 报错：require is not defined，是因为浏览器不支持 require 函数。要解决这个问题，我们需要使用一些工具来将 require 函数转换成浏览器端支持的代码，常见的工具有 webpack 和 Browserify 等。在使用 webpack 时，需要在项目中安装 webpack 和 webpack-cli、babel-loader、@babel/core、@babel/preset-env 等依赖，并创建一个 webpack.config.js 文件来配置打包规则。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6516414995b1f8cacde963b1