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 变量时，icons.ts 在 inconSet.ts 被处理之前提供。

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

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

score 1 · Accepted Answer

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

应该管用。

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

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

score 1 · Accepted Answer

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

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

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

我目前正在努力解决一个类似的问题，我希望它是循环引用的结果，就像这个老问题一样。

2 回答 2