Javascript TS和Babel之间的默认导入正常化的正确方法是什么？

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

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

如果通过

tsc

编译，则应记录

未定义的

，但它与巴贝尔的预期效果相同。但是，如果我们这样做：

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

这表示TS中的

Button{…}

，以及Babel中的

{default:Button{…}}

可以通过在编译器选项中提升标志

esModuleInterop

来修复此差异

另一方面，没有

esModuleInterop

的其他方法是先用

tsc

编译，然后用Babel编译，但速度很慢，我们会失去热插拔功能。我们也可以在运行时修复它，比如

Imported=_Imported.default | | u Imported

，但这很容易出错，并且会增加维护负担

问题是，

esModuleInterop

是否是正确的解决方案？如果是，是否存在

“esModuleInterop”：false的任何用例

问题是，esModuleInterop是解决这一问题的正确解决方案吗

对。这正是它的设计目的

如果是，是否存在“esModuleInterop”的任何用例：false

esModuleInterop:true
生成更多的JavaScript，让魔术像巴贝尔一样发挥作用。如果您不想对默认导出（如babel）进行魔法映射，从而稍微提高性能，请不要使用该标志

问题是，esModuleInterop是解决这一问题的正确解决方案吗

对。这正是它的设计目的

如果是，是否存在“esModuleInterop”的任何用例：false

esModuleInterop:true
生成更多的JavaScript，让魔术像巴贝尔一样发挥作用。如果您不想对默认导出（如babel）进行魔法映射，从而稍微提高性能，请不要使用该标志