如何使用await import()导入导出的构造函数？

问题根源 #

动态import()和静态import的返回值结构完全不同：

• 静态import test from './test.js'会直接提取模块的默认导出值，这里的test就是你定义的myConstructor构造函数本身。
• 而await import('./test.js')返回的是一个模块命名空间对象，所有导出内容都作为这个对象的属性存在——默认导出对应default属性，命名导出对应各自的属性名。

你写的const test = await import('./test.js')里，test是整个模块对象，不是构造函数本身，所以new test()会抛出“不是构造函数”的错误。

解决方案 #

有两种方式可以正确获取动态导入的默认导出构造函数：

1. 解构赋值直接提取默认导出

const { default: test } = await import('./test.js')
new test() // 正常打印'hi'

2. 直接访问模块对象的default属性

const testModule = await import('./test.js')
new testModule.default() // 正常打印'hi'

补充说明 #

你提到“普通函数不会出现该问题”其实是误解——如果普通函数也是默认导出，动态导入后直接调用test()同样会报错，必须调用test.default()。如果之前测试普通函数时没问题，大概率是用了命名导出而非默认导出，或者调用时误访问了default属性却没注意到。

内容的提问来源于stack exchange，提问作者Dshiz