在我的webpack
配置中。我定义了别名
alias: {
components: 'src/components/',
config: 'src/config/'
}
当我从这个路径导入一个模块时,发生了一个eslint错误。
import ShadowWrapper from 'components/ShadowWrapper'
错误'组件'应该在项目的依赖项中列出。运行“npm i -S components "添加import/no-externally-dependencies
5条答案
按热度按时间csga3l581#
谢谢Pranav解决这个问题!
我在这篇文章中添加了一些代码,使其对其他人更实用。
首先,在webpack配置文件中,我定义了这个别名:
允许我以这种方式在应用程序中导入组件:
我已经安装了
eslint-import-resolver-webpack
插件,并将下面的代码放入. eslintrc.js或.eslintrc文件中:这就是它运行linter后,我摆脱了
Unable to resolve path to module 'components/NewsFeed'
错误消息希望对你们中的一些人有帮助!
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合并)中,我添加了一些别名:
1.在**.eslintsrc**(或.eslintsrc.js,如果你使用它)中,我为这些别名添加了插件和Map,如下所示:
为了清晰起见,我添加了一些扩展和一些好的措施,你可以选择不为自己使用。
可选:
如果您使用VS Code,并希望这些别名使用路径intellisense,请在根目录下添加文件jsconfig.json,并指定别名路径:
React和Typescript还有其他设置。在官方网站上查看documentation。
qf9go6mv3#
此问题可以通过使用eslint-import-resolver-webpack解决
qq24tv8q4#
另一种方法是在
webpack.config.js
和.eslintrc
之间不Map别名。您可以使用
eslint-import-resolver-webpack
并像这样设置.eslintrc
文件:cidc1ykv5#
就我个人而言,我不得不使用多种方法来告诉我的项目我需要我的别名,我不得不使用package.json的方式与__moduleAliases,像这样
}
我不得不使用如下路径的别名设置:
和eslint-import-resolver-alias如下所示:
如果我省略了三种方法中的一种,它就不起作用了,我不知道为什么,但它是这样工作的。我使用es 5语法,它工作正常,唯一不工作的是,假设我在/a. js中,我做const B = require('@ B/index')它不会把我带到链接到b别名的文件夹中的索引文件,但我想这是好的,如果你认为我可以用我的配置做得更好,让我知道:)