[英]Typescript can't find modules which are imported with webpack alias
I am currently setting up my project to be a bit cleaner, especially in the frontend part with references. 我目前正在将我的项目设置为更加干净,尤其是在带有参考的前端部分中。
In hindsight I noticed that I was very generous with the folder structure for my frontend files and ended up with lots of layers. 事后看来,我注意到我对前端文件的文件夹结构非常慷慨,最终出现了很多层。 That's why I decided to look into what webpack can do for this case, and found out about the alias functionality.
这就是为什么我决定研究webpack在这种情况下可以做什么的原因,并了解别名功能。
This is how I set it up: 这是我的设置方式:
resolve: {
alias: {
components: path.resolve(__dirname, "Scripts/Views/Components"),
data: path.resolve(__dirname, "Scripts/Data"),
definitions: path.resolve(__dirname, "Scripts/Definitions"),
helper: path.resolve(__dirname, "Scripts/Helper"),
scripts: path.resolve(__dirname, "Scripts"),
views: path.resolve(__dirname, "Scripts/Views"),
},
extensions: [".tsx", ".ts", ".js", ".jsx"],
modules: ["node_modules"]
}
As you can see, I created alias' for various folders here. 如您所见,我在这里为各种文件夹创建了别名。
This is my folder structure: 这是我的文件夹结构:
Now, let's hop into eg the LoginDialog.tsx. 现在,让我们跳到例如LoginDialog.tsx。 Here I am trying to import like this:
在这里,我试图这样导入:
import { IErrorAttachedProperty } from "definitions/formHelper";
However, all I end up with here is an error that no module could be found this way. 但是,我最后遇到的一个错误是,无法以这种方式找到任何模块。
What am I doing wrong here? 我在这里做错了什么?
If it is of any significance - The webpack.config.js resides in the same directory as the Scripts folder. 如果有任何意义-webpack.config.js与Scripts文件夹位于同一目录中。
Ok, so to avoid confusion for others I'm posting my solution/findings: 好的,为了避免与其他人混淆,我发布了我的解决方案/发现:
Yes, you can just use
tsconfig.json
without needing
resolve/alias
in Webpack.
是的,您只需使用
tsconfig.json
即可,而无需在Webpack中使用
resolve/alias
。
You should just do it once with Typescript setup.
您只需使用Typescript设置执行一次。
EDIT: Nope, turns out you do need resolve/alias
section in webpack.config.js
. 编辑:不,事实证明您确实需要
webpack.config.js
resolve/alias
部分。 Typescript will be happy without it, but then you will get Webpack errors when it builds. 没有它,Typescript会很高兴,但是在构建时,您会遇到Webpack错误。 Do both to make it work .
两者都要使它起作用 。
TIP: Make sure the paths you provide in the paths
section of tsconfig.json
are relative to the baseUrl
entry point. 提示:请务必在规定的路径
paths
的部分tsconfig.json
是相对baseUrl
切入点。 Don't make them relative to the tsconfig.json
file, baseUrl
is like the project root for the non-relative module imports defined with paths
. 不要让他们相对于
tsconfig.json
文件baseUrl
就像是项目的根与定义的非亲属模块导入paths
。
From Typescript docs, absolute modules names (import * from package-a
) are relative to baseUrl
~ https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-url 从打字稿文档,绝对模块名称(从进口*
package-a
)相对于baseUrl
〜 https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-url
All module imports with non-relative names are assumed to be relative to the baseUrl.
假定所有具有非相对名称的模块导入都相对于baseUrl。
Relative modules (import * from ./packages
) are just from current file as stated: 相对模块(从
./packages
导入*)仅来自当前文件,如所述:
Note that relative module imports are not impacted by setting the baseUrl, as they are always resolved relative to their importing files.
请注意,相对模块导入不受设置baseUrl的影响,因为它们始终相对于其导入文件进行解析。
So if you have: 因此,如果您有:
./packages
./package-a
./package-b
./index.ts
./tsconfig.json
Your tsconfig.json
would look like: 您的
tsconfig.json
如下所示:
{
"compilerOptions": {
"baseUrl": "./packages",
"paths": {
"package-a/*": [ "./package-a/*" ],
},
},
"include": [
"./packages/**/*"
]
}
Then your webpack.config.json
would look like: 然后,您的
webpack.config.json
如下所示:
{
resolve: {
alias: {
'package-a': path.resolve(__dirname, 'packages/package-a/'),
}
},
}
Then you can import from index.ts
like this: 然后您可以像这样从
index.ts
导入:
import { pkgAThing } from 'package-a';
// or
import { otherPkgAThing } from 'package-a/dir/dir`;
Which is alternative to relative style: 这是相对样式的替代方法:
import { pkgAThing } from './packages/package-a`;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.