在代碼中包含@popperjs/core和eslint時如何修復意外的Webpack錯誤

我遇到了 @popperjs/core 在我的正常 javascript 環境中無法正常作業的問題。

這是一些演示我的問題的代碼

索引.js

import { createPopper } from '@popperjs/core';

console.log("Hello world!");

包.json

{
  "name": "popperjsproblem",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "@popperjs/core": "^2.10.2"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/preset-env": "^7.15.8",
    "@babel/eslint-parser": "^7.15.8",
    "babel-loader": "^8.2.2",
    "eslint": "^8.0.1",
    "eslint-import-resolver-webpack": "^0.13.1",
    "eslint-webpack-plugin": "^3.0.1",
    "eslint-plugin-import": "^2.20.0",
    "webpack": "^5.58.2",
    "webpack-cli": "^4.9.0"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "eslintConfig": {
    "extends": [
      "eslint:recommended"
    ],
    "root":true,
    "parser": "@babel/eslint-parser",
    "parserOptions": {
      "ecmaVersion": 2018,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "browser": true,
      "node": true,
      "es6": true
    },
    "rules": {
      "no-debugger": "off",
      "no-console": "off",
      "no-unused-vars": "warn"
    },
    "settings": {
      "import/resolver": "webpack"
    }
  }
}

webpack.config.js

const path = require("path");

const ESLintPlugin = require('eslint-webpack-plugin');
const esLintLoaderOptions = {
  extensions: [`js`, `jsx`],
  exclude: [
      `/node_modules/`
  ]
};

module.exports = {
  entry: "./index.js", 
  mode: "development",
  target:"web",
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist/",
},
stats: {
    colors: true,
},
devtool: "cheap-module-source-map",  
  plugins: [   
    new ESLintPlugin(esLintLoaderOptions)
],
  module: {
    rules: [
      {
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: ["babel-loader"],
      },
    ],
  }
};

當我運行“npm run build”時，出現以下錯誤

ERROR in Failed to load config "./.config/eslint.config" to extend from.
Referenced from: {project directory}\node_modules\@popperjs\core\package.json

如果我要在 index.js 中匯入另一個 3rd 方庫而不是 @popperjs/core 并運行“npm run build”，則不會顯示任何錯誤，代碼將被正確轉換并放入一個名為 main.bundle.js 的檔案中，該檔案被找到在 dist 檔案夾中。我希望@popperjs/core 也會發生同樣的情況。所以我的問題是是否有可能改變一些東西，以便我可以匯入 @popperjs/core 并獲得與其他庫相同的行為。問題似乎與 ESLint 有關。理想情況下，我希望保留 ESLint，因為它顯然是一個非常有用的開發工具。

在研究這個問題時，我遇到了這個鏈接https://github.com/popperjs/popper-core/issues/1105 ，它似乎描述了一個與我類似的問題。但是，我看不出我將如何應用給定我的設定的解決方案。

uj5u.com熱心網友回復：

奇怪的是，解決方案似乎是從 eslint-webpack-plugin 選項中洗掉 node_modules。即改變

const esLintLoaderOptions = {
  extensions: [`js`, `jsx`],
  exclude: [
      `/node_modules/`
  ]
};

到

const esLintLoaderOptions = {
  extensions: [`js`, `jsx`]
};

eslint-webpack-plugin 檔案說默認情況下排除 node_modules，因此必須與此有關。

標籤：javascript 网络包 eslint babel-loader popper.js

上一篇：將Summernote與Webpack結合使用

下一篇：在多構建Vuejs應用程式中定義多個配置的最佳方法是什么？