带有 ES6 模块的命名空间

Question

如何使用 ES6 模块分配命名空间？我想用 jQuery 做例子，其中命名空间是

$

，但按照预期的 ES6 方式进行。我的所有模块都构建在单独的文件中，这些文件默认导出类/函数/任何内容（例如

export default class Pikachu

）。如何将其导入到另一个（主）文件中，以便用户可以使用例如访问此类

Namespace.Pikachu

？

我开始明白这可能与命名导出有关，但我不太确定如何做。请问有什么帮助吗？

Answer 1

如果使用模块，则不需要命名空间。

命名空间的目的是防止定义相同名称的不同文件之间发生冲突。

模块通过让调用站点选择一个名称来给出它需要的每个模块，从而完全消除了这个问题。

您只需导出一个包含您想要的内容的简单对象，其他文件可以将其导入到他们选择的任何名称。

Answer 2

这是一个老问题，有一个公认的答案，但我觉得应该提到模块名称空间在某种程度上仍然受到支持。通过“*”从模块导入所有导出的变量总是会创建这样的命名空间。 （请参阅 MDN 上的此处）

import * as Namespace from "./myModule.js";
console.log(Namespace.Pikachu);

同样，动态导入总是返回模块命名空间的 Promise：

const Namespace = await import("./myModule.js");
console.log(Namespace.Pikachu);

有关命名空间是什么样的对象的更多详细信息，请参阅this SO answer

第三种选择是创建模块中已有的命名空间并将其设为默认导出：

// within "./myModule.js"
export default {Pikachu, otherVariable, ...};
// within the other module
import Namespace from "./myModule.js";
console.log(Namespace.Pikachu);