eslint错误显示与webpack别名

ijxebb2r  于 2023-10-19  发布在  Webpack
关注(0)|答案(5)|浏览(138)

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

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

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

import ShadowWrapper from 'components/ShadowWrapper'

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

csga3l58

csga3l581#

谢谢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'错误消息
希望对你们中的一些人有帮助!

e4yzc0pl

e4yzc0pl2#

以下是对我有效的方法:
1.我安装了**eslint-import-resolver-alias作为dev依赖:
npm install eslint-plugin-import eslint-import-resolver-alias --save-dev
1.在
Webpack config**(在我的例子中,它是Vue config,它被Vue-config与Webpack config合并)中,我添加了一些别名:

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')
     }
 }

1.在**.eslintsrc**(或.eslintsrc.js,如果你使用它)中,我为这些别名添加了插件和Map,如下所示:

"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

qq24tv8q

qq24tv8q4#

另一种方法是在webpack.config.js.eslintrc之间不Map别名。
您可以使用eslint-import-resolver-webpack并像这样设置.eslintrc文件:

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

cidc1ykv5#

就我个人而言,我不得不使用多种方法来告诉我的项目我需要我的别名,我不得不使用package.json的方式与__moduleAliases,像这样

"_moduleAliases": {
"@root": ".",
"@sApi": "./Server/api",
"@sApp": "./Server/app",
"@sCtrl": "./Server/controller",
"@sData": "./Server/data",
"@sDoc": "./Server/doc",
"@sError": "./Server/error",
"@sLog": "./Server/log",
"@sLog-w":"./Server/log/winston",
"@sMid-dto": "./Server/middleware/dto",
"@sMid-jSche": "./Server/middleware/schema",
"@sMid-utils": "./Server/middleware/utils"

}
我不得不使用如下路径的别名设置:

...createAliasSetting({
  '@sApi': path.resolve(__dirname, './Server/api'),
  '@sApp': path.resolve(__dirname, './Server/app'),
  '@sCtrl': path.resolve(__dirname, './Server/controller'),
  '@sData': path.resolve(__dirname, './Server/data'),
  '@sDoc': path.resolve(__dirname, './Server/doc'),
  '@sError': path.resolve(__dirname, './Server/error'),
  '@sLog': path.resolve(__dirname, './Server/log'),
  '@sLog-w': path.resolve(__dirname, './Server/log/winston'),
  '@sMid-dto': path.resolve(__dirname, './Server/middleware/dto'),
  '@sMid-jSche': path.resolve(__dirname, './Server/middleware/schema'),
  '@sMid-utils': path.resolve(__dirname, './Server/middleware/utils'),
}),

和eslint-import-resolver-alias如下所示:

'import/resolver': {
  alias: {
    map: [
      ['@sApi', './Server/api'],
      ['@sApp', './Server/app'],
      ['@sCtrl', './Server/controller'],
      ['@sData', './Server/data'],
      ['@sDoc', './Server/doc'],
      ['@sError', './Server/error'],
      ['@sLog', './Server/log'],
      ['@sLog-w', './Server/log/winston'],
      ['@sMid-dto', './Server/middleware/dto'],
      ['@sMid-jSche', './Server/middleware/schema'],
      ['@sMid-utils', './Server/middleware/utils'],
    ],
    extentions: ['.js', '.json'],
  },
},

如果我省略了三种方法中的一种,它就不起作用了,我不知道为什么,但它是这样工作的。我使用es 5语法,它工作正常,唯一不工作的是,假设我在/a. js中,我做const B = require('@ B/index')它不会把我带到链接到b别名的文件夹中的索引文件,但我想这是好的,如果你认为我可以用我的配置做得更好,让我知道:)

相关问题