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

Question

TypeScript编译器和Babel处理默认导出的方式有所不同。 例如：

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

如果通过undefined进行编译，它将记录tsc，但它与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生成 more JavaScript，以使魔术工作像babel一样。如果您希望不对默认导出（如babel）进行魔术映射而导致轻微的性能提升，请不要使用该标志。