typescript - 来自 index.ts 的 Webpack 依赖项以错误的顺序解析

Question

我们在最新的项目中严重依赖 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 变量时，会在处理 inconSet.ts 之前提供 icons.ts。

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

我认为 webpack 会处理这个问题。

这是重现问题的最小 repo 协议(protocol):https://github.com/eulbot/webpack-es6-index-barrels

Answer 1

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


应该可以。

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

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