Webpack resolve.alias 不適用於打字稿？

Question

我嘗試在打字稿中縮短我的導入

from import {Hello} from "./components/Hello";

import {Hello} from "Hello";

對於我發現你可以使用resolve.alias中的WebPack因此，我配置了部分如下

resolve: {
    root: path.resolve(__dirname),
    alias: {
        Hello: "src/components/Hello"
    },
    extensions: ["", ".ts", ".tsx", ".js"]
},

Webpack 構建，並且輸出 bundle.js 工作。 然而打字稿的智能感知抱怨它cannot find the module

所以我的問題是 webpack 的 resolve.alias 是否適用於打字稿？

我發現了以下問題，但沒有答案。

Answer 1

如果您使用ts-loader ，則可能需要將您的 webpack alias / resolve設置與tsconfig.json paths設置tsconfig.json 。

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "Hello": ["src/components/Hello"]
        }
    }
}

如果您使用的是awesome-typescript-loader typescript awesome-typescript-loader ，那么 webpack 可以根據 repo 中關於此問題的狀態，從您的tsconfig.json的paths設置中自動計算出來。 這樣，您就不需要在 Webpack alias字段中復制相同的信息。

Answer 2

您在tsconfig.json中遺漏了一個非常重要的點：匹配模式！

它應該像這樣配置：

"baseUrl": ".",
"paths": {
    "appSrc/*": [
        "src/*"
    ]
 }

“*”是告訴 TS 匹配右側任何內容的重要部分。

我從這篇文章中發現： Type-safe es2015 module import path aliasing with Webpack, Typescript and Jest

注意

• 確保您的所有webpack.config.js都已更新（例如，如果您使用故事書）。
• 如果您使用 Visual Studio Code，您可能需要重新啟動它，以便波浪線消失。

Answer 3

正如其他人提到的，您需要在 webpack.config.js 中提供alias ：

    resolve: { 

        extensions: [".ts", ".js"],
        alias: {
            forms: path.resolve(__dirname, "src/forms/")
        } 
    },

這需要與您的tsconfig.json文件同步（需要tsconfig.json和路徑）。

"compilerOptions":  {
    baseUrl: "./",
    ...
    paths: {
       "forms/*": ["src/forms/*"]
    }
}

注意：通配符模式是與您的解析別名配置匹配所必需的。

然后您可以使用別名導入任何庫：

import { FormsModule } from "forms/my-forms/my-forms.module";

Answer 4

如果有人仍然遇到此問題，請不要忘記將您的文件夾添加到 tsconfig.json 上的“include”選項中，如下所示：

{
  "compilerOptions": {
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "outDir": "./built/",
  "include": [
    "./src/**/*",
    "./tests/**/*"
  ]
}

Answer 5

我不得不對 Caio Saldanha 的解決方案進行小幅調整，使其適用於我的環境。

我正在使用帶有babel-plugin-module-resolver Babel 7 來解析別名。 沒有ts-loader或awesome-typescript-loader因為 Babel 7 使用@babel/preset-typescript支持開箱即用的 TypeScript。 我必須為每個別名添加額外的路徑配置以自動加載模塊根目錄（例如index.ts ）：

"baseUrl": ".",
"paths": {  // this must be synchronized with .babelrc.js's module-resolver alias config
    "component": ["src/component/index.ts"],
    "component/*": ["src/component/*"],
    ...
}

在/component文件夾中有一個index.ts ，內容如下：

export { default as Logo } from './Logo';

如果沒有額外的.../index.ts行，這個導入對我不起作用：

import { Logo } from 'component';  

.babelrc.js別名配置：

plugins: [
[
    'module-resolver',
    {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        root: ['./src'],
        alias: {
        // this must be synchronized with tsconfig.json's path configuration
            component: './src/component',
        },
    },
],

Answer 6

您還可以配置tsconfig-paths-webpack-plugin以免在多個地方重復您的別名。 它將從tsconfig.json文件中獲取別名並自動將它們添加到 webpack。

Answer 7

有2種情況

1. 當您編寫自定義 webpack 時，它可以與typescript一起使用，但不能直接使用。 解釋一下，有兩種類型的編譯發生在后台。 首先是 tsx -> js，其中 tsconfig.json 發揮作用，但是當您實際編譯 js 代碼時，webpack 就會出現。 所以對於別名，resolve 應該放在兩個地方，即在 tsconfig 和 webpack 中才能成功運行應用程序
2. 當您使用默認值時（在創建反應應用程序之后） ：您只需要在 tsconfig 中添加"baseUrl": "./src"並查看代碼工作。

Answer 8

我認為你可以做到這一點，並讓它按照你描述的方式工作：

resolve: {
    root: [
        path.resolve(__dirname),
        <path_to_components_directory> //e.g. path.resolve(__dirname, 'src', 'components')
    ], 
    extensions: ["", ".ts", ".tsx", ".js"]
},

然后你可以import {Hello} from "Hello";

我知道我這樣做是為了解析src/js目錄中的文件路徑。 雖然我沒有使用打字稿，但我認為它不會影響結果。