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]';

在其他文件夹中，我可以使用相同的语法（和相同的文件夹名称）进行调用。另外，我可以从其他文件夹中调用 imports from ~redux.

我几乎尝试了我所知道的一切，但没有任何改变。

如果有人感兴趣，这里是（几乎）整个 Webpack 配置：https://pastebin.com/gBabDjH9

Answer 1

导出在运行时被解析为 undefined 的事实可能与您的 webpack 配置正交，而是由循环依赖引起的。

要检查此问题，您可以

确认从 ./index 导入时出现相同的错误。如果是，则很有可能是循环依赖错误。
运行 madge 在你的项目上识别这个循环依赖。类似于 madge <myTranspiledFolder> --circular。确保文件 madge 运行已模块化（madge 支持 AMD、CommonJS 和 ES6 模块）并且尚未捆绑。

TypeScript 和 Webpack 3 中的别名问题

Issue with alias in TypeScript and Webpack 3

import

alias

module

typescript

webpack