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中要求dev依賴。

您可以在webpack文件夾中創建.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中devDependencies webpack.config.js

"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 導入而不會出現此錯誤/警告。