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模块）并且尚未捆绑。