规范 TS 和 Babel 之间的默认导入的正确方法是什么?

Question

TypeScript 编译器和 Babel 句柄默认导出略有不同。 例如：

import Button from 'grommet/components/Button'
console.log(Button)

如果通过tsc编译，这将记录undefined，但它在 Babel 中按预期工作。但是，如果我们这样做：

import * as Button from 'grommet/components/Button'
console.log(Button)

这在 TS 中表示Button { ... }，在 Babel 中表示{ default: Button { ... } }。

可以通过在编译器选项中引发esModuleInterop标志来修复此差异。

顺便说一句，没有esModuleInterop的其他方法是先用tsc编译，然后再用 Babel 编译，但它很慢，而且我们失去了热插拔功能。我们也可以像Imported = _Imported.default || _Imported一样在运行时修复它，但这很容易出错并且给维护带来负担。

问题是，esModuleInterop正确的解决方案吗？如果是这样，是否有任何"esModuleInterop": false用例？

Answer 1

问题是，esModuleInterop 是合适的解决方案吗？

是的。这正是它的设计目的。

如果是这样，是否有"esModuleInterop"的用例：false？

esModuleInterop: true生成更多的JavaScript，使魔术像babel一样工作。如果您想要不对默认导出(如 babel(进行魔术映射的轻微性能提升，请不要使用该标志。