TypeScript和Webpack 3中的別名問題

Question

更新：解決了！ 感謝@JulesRandolph指出循環依賴問題。

我目前正在開發的項目中出現了一個非常愚蠢的情況。 該項目是基於最新版本的TypeScript，webpack和awesome-typescript-loader構建的。

tsconfig包含以下別名：

"paths": {
  "~actions" : [
    "app/actions/index.ts"
  ],
  "~components" : [
    "app/components/index.ts"
  ],
  "~helpers" : [
    "app/helpers/index.ts"
  ],
  "~middlewares" : [
    "app/middlewares/index.ts"
  ],
  "~redux" : [
    "app/redux/index.ts"
  ],
  "~styles/*" : [
    "app/styles/*"
  ],
  "~types" : [
    "app/types/index.ts"
  ]

Webpack別名配置如下所示（請注意，我也嘗試了不使用$並針對該用法（使用/ *）修改tsconfig）：

{
  '~actions$': '/Users/user/Workspace/prj-name/app/actions/index.ts',
  '~components$': '/Users/user/Workspace/prj-name/app/components/index.ts',
  '~helpers$': '/Users/user/Workspace/prj-name/app/helpers/index.ts',
  '~middlewares$': '/Users/user/Workspace/prj-name/app/middlewares/index.ts',
  '~redux$': '/Users/user/Workspace/prj-name/app/redux/index.ts',
  '~styles': '/Users/user/Workspace/prj-name/app/styles',
  '~types$': '/Users/user/Workspace/prj-name/app/types/index.ts'
}

我的問題是， 尤其是僅對於 “ app / redux / app.ts”文件，我無法使用以下語法導入：

import {
  imp1,
  imp2
} from '~redux';

導入內容未定義。 但是，我可以這樣做：

import {
  imp1
} from './[comp-name]';

在其他文件夾中，我可以使用相同的語法（和相同的文件夾名稱）進行調用。 另外，我可以從其他文件夾調用〜redux的導入。

我嘗試了幾乎所有我知道的東西，但沒有任何改變。

如果有人感興趣，這里是（幾乎）整個Webpack配置： https ://pastebin.com/gBabDjH9

Answer 1

導出在運行時解析為undefined的事實很可能與您的webpack配置正交，而是由循環依賴性引起的。

要檢查此問題，您可以

1. 確認從./index導入時發生相同的錯誤。 如果是這樣，則很有可能是循環依賴項錯誤。
2. 對您的項目運行madge以識別此循環部門。 像madge <myTranspiledFolder> --circular 。 確保運行madge的文件已模塊化（madge支持AMD，CommonJS和ES6模塊）並且尚未捆綁。