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

Question

我目前正在将我的项目设置为更加干净，尤其是在带有参考的前端部分中。

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

这是我的设置方式：

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

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

这是我的文件夹结构：

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

import { IErrorAttachedProperty } from "definitions/formHelper";

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

我在这里做错了什么？

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

Answer 1

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

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

这是ts别名的好例子

Answer 2

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

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

编辑：不，事实证明您确实需要webpack.config.js resolve/alias部分。 没有它，Typescript会很高兴，但是在构建时，您会遇到Webpack错误。 两者都要使它起作用 。

提示：请务必在规定的路径paths的部分tsconfig.json是相对baseUrl切入点。 不要让他们相对于tsconfig.json文件baseUrl就像是项目的根与定义的非亲属模块导入paths 。

从打字稿文档，绝对模块名称（从进口* package-a ）相对于baseUrl 〜 https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-url

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

相对模块（从./packages导入*）仅来自当前文件，如所述：

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

因此，如果您有：

./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`;

这是相对样式的替代方法：

import { pkgAThing } from './packages/package-a`;