如何使用异步ESM导入获取ESM模块

Question

我在柱塞里有下面的代码..。

// Thing.js
export class Thing{
  constructor(){
    console.log("This thing is alive!!!!");
  }
}
// index
import("./Thing.js").then(
  (Thing)=>{
      new Thing();
  }
)

但我得到的是

VM662 script.js:5 Uncaught (承诺中) TypeError: Thing不是构造函数

？

Answer 1

您的问题是，您试图读取事物，就好像它是一个默认的导出，而不是一个指定的导出。这两种方法中的任何一种都能奏效：

// Thing.js
export class Thing{
  constructor(){
    console.log("This thing is alive!!!!");
  }
}
// index
import("./Thing.js").then(
  ({Thing})=>{ // NOTE destructuring since Thing is a named export
      new Thing();
  }
)

或者这个

// Thing.js
export default class Thing{ // NOTE default
  constructor(){
    console.log("This thing is alive!!!!");
  }
}
// index
import("./Thing.js").then(
  (Thing)=>{ // No destructuring needed, can read Thing directly
      new Thing();
  }
)