使用 webpack 别名显示 eslint 错误答案

【问题标题】：eslint error showing with webpack alias使用 webpack 别名显示 eslint 错误
【发布时间】：2018-05-31 11:30:28
【问题描述】：

在我的webpack 配置中。我定义了别名

alias: {
            components: 'src/components/',
            config: 'src/config/'
}

当我从这个路径导入一个模块时，发生了一个 eslint 错误。

import ShadowWrapper from 'components/ShadowWrapper'

错误“组件”应列在项目的依赖项中。运行 'npm i -S components' 以添加 import/no-extraneous-dependencies

【问题讨论】：

标签： javascript webpack eslint

【解决方案1】：

感谢 Pranav 解决此问题！
我在这篇文章中添加了一些代码，以使其对其他人更实用。
首先，在 webpack 配置文件中我定义了这个别名：

alias:{
  components: path.resolve(__dirname, "src", "components")
}

这允许我以这种方式在我的应用程序中导入组件：

import NewsFeed from 'components/NewsFeed'

我已经安装了eslint-import-resolver-webpack 插件并将以下代码放入 .eslintrc.js 或 .eslintrc 文件中：

settings: {
    'import/resolver': {
      alias: {
        map: [
          ['components', './src/components']
        ]
      }
    }

运行 linter 后就这样我摆脱了 Unable to resolve path to module 'components/NewsFeed' 错误消息
希望它对你们中的一些人有所帮助！

【讨论】：

【解决方案2】：

这对我有用：

我安装了 eslint-import-resolver-alias 作为开发依赖：

npm install eslint-plugin-import eslint-import-resolver-alias --save-dev

在 Webpack 配置（在我的例子中，它是 Vue 配置，它通过 Vue-cli 与 Webpack 配置合并），我添加了一些别名：

 resolve: {
     extensions: ['.js', '.vue', '.json', '.less'],
     alias: {
         Site: path.resolve(__dirname, 'src/site'),
         Admin: path.resolve(__dirname, 'src/admin'),
         Common: path.resolve(__dirname, 'src/common'),
         Assets: path.resolve(__dirname, 'src/common/assets'),
         Configs: path.resolve(__dirname, 'src/common/configs'),
         Style: path.resolve(__dirname, 'src/common/style')
     }
 }

在 .eslintsrc（或 .eslintsrc.js，如果你使用的话）中，我为这些别名添加了插件和映射，如下所示：

"extends": ["plugin:import/recommended"],
"settings": {
     "import/resolver": {
         "alias": {
             "map": [
                 ["Site", "./src/site"],
                 ["Admin", "./src/admin"],
                 ["Common", "./src/common"],
                 ["Assets", "./src/common/assets"],
                 ["Configs", "./src/common/configs"],
                 ["Style", "./src/common/style"]
             ]
         },
         "extensions": [".js", ".less", ".json", ".vue"]
     }
}

为了清晰起见，我添加了一些扩展和一些好的措施，您可以选择不自己使用。

可选：

如果您使用 VS Code 并希望这些别名与路径 intellisense 一起使用，请在根目录添加一个文件 jsconfig.json，并指定您的别名路径：

{
    "compilerOptions": {
        "target": "esnext",
        "allowSyntheticDefaultImports": false,
        "baseUrl": "./",
        "paths": {
            "~/*": ["src/*"],
            "Root/*": ["src/*"],
            "Site/*": ["src/site/*"],
            "Admin/*": ["src/admin/*"],
            "Common/*": ["src/common/*"],
            "Assets/*": ["src/common/assets/*"],
            "Configs/*": ["src/common/configs/*"],
            "Style/*": ["src/common/style/*"]
        }
    },
    "exclude": ["node_modules", "dist"]
}

React 和 Typescript 还有其他设置。在官网查看documentation。

【讨论】：

有趣的是，即使我的项目使用 webpack（带有 eslint），eslint-import-resolver-alias 与 eslint-import-resolver-webpack 相比让我摆脱了 linting 错误
这个对我也有用，除了更新 eslint 配置外，我还需要安装这个包。

【解决方案3】：

这个问题可以通过eslint-import-resolver-webpack解决

【讨论】：

欢迎提供解决方案链接，但请确保您的答案在没有它的情况下有用：add context around the link 这样您的其他用户就会知道它是什么以及为什么会出现，然后引用最相关的您链接到的页面的一部分，以防目标页面不可用。 Answers that are little more than a link may be deleted.
一般来说，链接到工具或库should be accompanied by usage notes, a specific explanation of how the linked resource is applicable to the problem, and some sample code。

【解决方案4】：

另一种方式，不在webpack.config.js 和.eslintrc 之间映射别名。

您可以使用eslint-import-resolver-webpack 并像这样设置.eslintrc 文件：

{
  "extends": [
    "@hrplatform"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": [
          "node_modules",
          "src"
        ]
      }
    }
  }
}

【讨论】：