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 以识别此循环 dep。像madge <myTranspiledFolder> --circular 这样的东西。确保运行 madge 的文件是模块化的（madge 支持 AMD、CommonJS 和 ES6 模块）并且尚未捆绑。