Typescript找不到使用Webpack别名导入的模块

Question

我目前正在将我的项目设置得更干净一些，尤其是在带有引用的前端部分中。

事后看来，我注意到我对前端文件的文件夹结构非常慷慨，最终出现了很多层。这就是为什么我决定研究webpack在这种情况下可以做什么的原因，并了解别名功能。

这是我的设置方式：

ItemsSource="{x:Bind AllSongs}"

如您所见，我在这里为各种文件夹创建了别名。

这是我的文件夹结构：

现在，让我们跳到LoginDialog.tsx。在这里，我试图这样导入：

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"]
}

但是，我最后遇到的一个错误是无法以这种方式找到任何模块。

我在这里做什么错了？

如果有重要意义-webpack.config.js与Scripts文件夹位于同一目录中。

Answer 1

您必须为打字稿配置tsconfig.json

"baseUrl": "./",
"paths": {
  "components/*": [
    "./src(or any other path)/Scripts/Views/Components"
  ]
},

这是一个很好的示例ts alias

Answer 2

好的，为了避免与其他人混淆，我发布了我的解决方案/发现：

是的，您只需使用tsconfig.json即可，而无需在Webpack中使用resolve/alias。您应该只使用Typescript设置执行一次。

编辑：：不，您确实需要resolve/alias中的webpack.config.js部分。没有它，Typescript会很高兴，但是在构建时，您会遇到Webpack错误。 同时执行这两项操作。

提示：请确保您在paths的{​​{1}}部分中提供的路径相对于tsconfig.json入口点。不要使它们相对于baseUrl文件，tsconfig.json就像用baseUrl定义的非相对模块导入的项目根。

从Typescript文档中，绝对模块名称（从paths导入*）相对于package-a〜https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-url

  

假定所有具有非相对名称的模块导入都相对于baseUrl。

相对模块（从baseUrl导入*）仅来自当前文件：

  

请注意，相对模块导入不受设置baseUrl的影响，因为它们始终相对于其导入文件进行解析。

所以，如果您有：

./packages

您的./packages ./package-a ./package-b ./index.ts ./tsconfig.json 如下：

tsconfig.json

然后您的{ "compilerOptions": { "baseUrl": "./packages", "paths": { "package-a/*": [ "./package-a/*" ], }, }, "include": [ "./packages/**/*" ] } 如下：

webpack.config.json

然后，您可以像这样从{ resolve: { alias: { 'package-a': path.resolve(__dirname, 'packages/package-a/'), } }, } 导入

：

index.ts

相对样式的替代方式：

import { pkgAThing } from 'package-a';
// or
import { otherPkgAThing } from 'package-a/dir/dir`;