我试图有一个命名空间为我的应用程序作为一个模块工作,并使用此命名空间导入我的组件,并限制相对路径的使用。
虽然,尽管我在这里遵循了alias的webpack文档:我http://webpack.github.io/docs/configuration.html#resolve-alias不能去上班了.
这就是我的resolve对象的样子:
resolve: {
root: path.resolve(__dirname),
alias: {
myApp: './src',
},
extensions: ['', '.js', '.json', '.jsx']
}
path.resolve(__dirname)
解析/Users/Alex/Workspace/MyAppName/ui/
我以这种方式将我的文件导入文件/Users/Alex/Workspace/MyAppName/ui/src/components/Header/index.jsx
:
import { myMethod } from 'myApp/utils/myUtils';
我在构建过程中得到以下错误:
ERROR in ./src/components/Header/index.jsx
Module not found: Error: Cannot resolve module 'myApp/utils/myUtils' in /Users/Alex/Workspace/MyAppName/ui/src/components/Header
@ ./src/components/Header/index.jsx 33:19-56
我也试过modulesDirectories
,但它也不工作。
你知不知道哪里出问题了?
7条答案
按热度按时间zhte4eai1#
将别名解析为绝对路径应该可以做到这一点:
用一个简单的例子来检查这个webpack resolve alias gist。
限制相对路径数量的另一个解决方案是将
./src
文件夹添加为根目录,而不是对其使用别名:然后,您将能够要求
./src
中的所有文件夹,就好像它们是模块一样。例如,假设您有以下目录结构:你可以像这样从
components
和utils
导入:类似于为
./src
中的每个文件夹指定一个别名。pdtvr36n2#
大多数情况下,这取决于您的项目文件夹结构。如果你的webpack文件在一个文件夹中,那么确保你相应地处理它。
同样,我们经常将文件夹命名为“source”,但在路径中使用“src”。
该死!复制粘贴占用了我很多调试时间
希望这能帮助那些由于上述原因而面临这些问题的人。
f1tvaqid3#
这对许多人来说可能是显而易见的,但如果你像我一样,花了太多时间试图弄清楚为什么从Windows或Mac移动到Linux时突然不起作用,然后检查路径中的大小写.
我和项目中的其他人都在使用Windows或Mac,但在家里,我双 Boot Ubuntu,我喜欢使用。在克隆我们的代码和运行webpack时,我得到了很多
Cannot resolve module...
错误。我花了比我想承认的更多的时间在node,npm,webpack或任何东西中搜索一些模糊的错误,直到我注意到失败模块的路径类似于@app/Shared/settings.js
,而require是require('@app/shared/settings')
。Windows不在乎,所以一切都很好,直到我开始在Linux上工作。事实证明,问题不是webpack,node或其他任何东西,所以这可能就是为什么我没有发现任何人暗示这可能是问题的原因。希望这能为某人节省一些时间。或者我只是太笨了,我不知道。
8ulbf1ek4#
我也犯了同样的错误。最后我发现问题是我写了两次
resolve
。第二个resolve
覆盖前一个。我的代码是这样的:更多帮助可在Webpack Doc中找到
ghhaqwfi5#
我不使用下一个语法:
qhhrdooz6#
在我的例子中,我想要别名
mobx
,这样mobx
的任何导入都将始终返回相同的示例,无论导入调用是来自我的主应用程序,还是来自它使用的库之一。起初我有这个:
但是,这只会强制从我的应用程序自己的代码中导入
mobx
以使用别名。为了让它也能用于库的导入调用,我必须做:
这很奇怪,因为我很确定以前只使用
mobx
别名就可以在这两个上下文中工作,但现在显然不行了(Webpack v4.41.2)。以上就是我解决的方法。(在我的例子中,我需要它来防止两个mobx示例被使用,因为这会破坏东西,而
LIBRARY_X
是使用npm-link符号链接的,所以我不能删除/统一辅助mobx
文件夹本身)qlvxas9a7#
添加对我有用的东西,因为当我搜索“webpack resolve alias not working”时,这仍然会首先弹出,并且现有的答案对我都不起作用。
我的配置使用了绝对路径the top voted answer suggests:
但它仍然抛出了OP所描述的相同类型的错误。我主要在monorepo中工作,我意识到这是因为webpack试图解析一个依赖项(monorepo中的兄弟包)上的导入,而这个依赖项并不作为源包的依赖项存在。
基本上,我有
packageA
引用packageB
。packageB
正在导入packageC
(所有3个都是monorepo中的兄弟包)。Webpack试图使用packageA
作为解析(即packageA/node_modules/packageC
)来解析packageC
,但packageC
不是packageA
的直接依赖项,而是packageB
的依赖项,这引发了错误。我发现我可以添加额外的别名来解决这个问题,就像下面在packageA的webpack配置中一样(取决于你的树结构):我不喜欢每当出现奇怪的情况时不断添加resolve.aliases的想法,所以我最终将所有的
resolve.alias
引用切换到NormalModuleReplacement调用,因为我能够定义一个回调来处理所有情况(并且我在所有webpack中共享相同的回调)。