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