如果我在 JavaScript 中使用 import *，我如何访问 class 名称？

Question

在index.html的头部：

<script src="main.js" type="module"></script>

user.js 文件:

export default class User {

    constructor(name, age){
        this.name = name;
        this.age = age;
    }

}

export function printName(user) {
    console.log(`User's name is ${user.name}`);
}

export function printAge(user){
    console.log(`User is ${user.age} years old`);
}

这个 main.js 可以工作：

import User, { printName, printAge } from '/user.js'
const user = new User('Bob', 11);
console.log(user)
printName(user)

但这行不通，因为它无法识别导出的 class

// name User if I use `import *` to import everything:
import * as MyUser from '/user.js'
const user = new MyUser.User('Bob', 11);
console.log(user)
printName(user)

这是我得到的错误：Uncaught TypeError: MyUser.User is not a constructor

Answer 1

您默认导出了 class，因此它将作为 MyUser.default 在命名空间对象上可用。

如果您想以 .User 的方式访问它，请不要使用默认导出。对于导出多个绑定（具有明确的主要绑定）的任何模块，我会推荐此方法。如果用户可以写 import User from … 而不是 import { User } from … 很重要，您还可以使用多个名称导出 class：

export class User {…}
export { User as default }

如果我在 JavaScript 中使用 import *，我如何访问 class 名称？

How can I access a class name if I use import * in JavaScript?

javascript

es6-modules