eslint 'html-webpack-plugin'应该列在项目的依赖项中，而不是 devDependencies。(导入/无外来依赖项)

Question

在我的 Vs 代码编辑器中，我在简单的 require 语句中收到以下错误，例如：

const HtmlWebpackPlugin = require('html-webpack-plugin')

错误：[eslint] 'html-webpack-plugin' 应该列在项目的依赖项中，而不是 devDependencies。(导入/无外来依赖项(

谁能解释什么是无无关依赖项，以及为什么它在我的 webpack 配置中的简单 require 语句中给我这个错误。我浏览了这个链接：eslint 应该列在项目的依赖项中，而不是 devDependencies 中，但它没有多大帮助，因为它没有解释我为什么要添加该行。

我的 eslintrc.json 文件：

{
"env": {
"browser": true,
"es6": true,
"commonjs": true,
"node": true
},
"extends": ["airbnb", "prettier", "prettier/react"],
"plugins": ["prettier"],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
}
}

Answer 1

你只需要告诉eslint，在webpack中要求开发依赖是可以的。

您可以使用 web pack 文件夹中创建.eslintrc

rules:
import/no-extraneous-dependencies: [error, { devDependencies: true }]

这将防止出现错误。

或者，您可以只设置

const HtmlWebpackPlugin = require('html-webpack-plugin'); // eslint-disable-line import/no-extraneous-dependencies

仅禁用此行

Answer 2

在您的.eslintrc.json中包含webpack.config.jsdevDependencies：

"rules": {
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"**/*.test.ts?(x)",
"**/*.spec.ts?(x)",
"**/test-utils.ts",
"webpack.config.js"
]
}
],

Answer 3

将"type": "module"添加到您的package.json，然后您可以使用 ES6 导入而不会出现此错误/警告。