首页 文章

index.ts的Webpack依赖项以错误的顺序解析

提问于
浏览 次
2

我们在最近的项目中严重依赖 moduleResolution: 'node' . 我们生成了index.ts桶来简化import语句 . 但是，在使用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会照顾这个 .

这是一个重现问题的最小回购：https://github.com/eulbot/webpack-es6-index-barrels

typescript webpack ts-loader

2 回答

  • 1

    我们的项目遇到了类似的问题 . 作为解决方案，我们使用了出口线的变化顺序，例如： export * from './iconSet' export * from './icons'

    应该管用 .

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

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

    回复于
  • 1

    至少在MacOs上使用Node 9.3.0，您提供的样本仓库似乎按预期运行 .

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

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

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

    回复于

相关问题