index.ts 中的 Webpack 依赖项以错误的顺序解决答案

【问题标题】：Webpack dependencies from index.ts resolved in wrong orderindex.ts 中的 Webpack 依赖项以错误的顺序解决
【发布时间】：2018-08-06 00:48:08
【问题描述】：

我们在最新项目中严重依赖moduleResolution: 'node'。我们生成了 index.ts 桶来简化导入语句。但是，当使用 webpack 构建应用程序时，模块似乎以错误的顺序解析：

我有一个文件iconSet.ts

export var IconSet = {
    Add: 'icon-add',
    Remove: 'icon-remove'
}

第二个文件icons.ts，用于导入 IconSet 变量

import { IconSet } from '.'

export var Icons = {
    Add: IconSet.Add,
    Remove: IconSet.Remove
}

还有一个 index.ts 文件，用于汇总所有导出，例如

export * from './icons'
export * from './iconSet'

在 app.ts 中导入 Icons 变量时，icons.ts 在 inconSet.ts 进程之前提供。

import { Icons } from '.'
console.log(Icons); // <- Cannot read property 'Add' of undefined

我认为 webpack 会解决这个问题。

【问题讨论】：

【解决方案1】：

至少对于 MacO 上的 Node 9.3.0，您提供的示例 repo 似乎可以按预期运行。

输出为：{ Add: 'icon-add', Remove: 'icon-remove' }

我使用 webpack cli 尝试了 development 和 production 模式。那是node_modules/.bin/webpack-cli --mode=development。

我目前正在努力解决一个类似的问题，我希望这是循环引用的结果，something like this old issue.

【讨论】：

【解决方案2】：

我们在项目中遇到过类似的问题。作为解决方案，我们使用更改导出行的顺序，例如： export * from './iconSet' export * from './icons'

应该可以。

如果 ClassA 导入 ClassB，那么 ClassB 应该放在 ClassA 之前>index.d.ts 文件。

另外，您可以考虑从彼此而不是从 index.d.ts 导入类。我们发现如果类是直接从类文件中导入的（例如IconSet会从iconSet.ts文件中导入），那么Webpack + ts-loader 正确导入依赖。

【讨论】：