webpack - 如何修复 import/no-unresolved eslint 以查看 package.json "module"而不是 "main"

Question

我目前正在导入具有 module 的 yarn 工作区包在 ES6 中定义并使用插件 linting 的字段 eslint-plugin-import
我的 create-react-app 设置自动使用 module通过 webpack 但 eslint 提示 @mycompany/utils包未定义。
Unable to resolve path to module '@mycompany/utils'. [import/no-unresolved]

So my question is how do I get my linter to look at the module path instead of main

这是我用于 utils 包的 package.json

{
  "name": "@mycompany/utils",
  "version": "0.0.2",
  "main": "dist/index.js",
  "module": "src/index.js"
}

Answer 1

• install eslint-import-resolver-webpack as a dev-dependency https://github.com/benmosher/eslint-plugin-import/tree/master/resolvers/webpack
• Update your settings in your .eslintrc

{
  "parser": "babel-eslint",
  "extends": [
    "eslint:recommended",
    "plugin:import/recommended",
    "plugin:react/recommended"
  ],
  "plugins": ["react"],

  "settings": {
    "import/resolver": {
      "webpack": {
        "config": {
          "resolve": {
            "modules": ["node_modules"]
          }
        }
      }
    }
  }
}

这样做是为了更新您的 eslint-plugin-import使用 webpack 解决而不是 node .在 webpack 解析器中，它会自动查看您的 module在 main第一的。

https://github.com/benmosher/eslint-plugin-import/blob/master/resolvers/webpack/index.js#L200