如何编写同时支持默认导出与命名导出的ES模块？

要同时支持import * as mylib from "./mylib.mjs"和import mylib from "./mylib.mjs"两种导入方式，且避免手动同步默认导出的内容，你可以利用ES模块的命名空间导入特性来实现，无需手动维护默认导出的函数列表：

方案实现代码 #

// 定义并导出所有命名函数
export function foo() {
  // ...
}
export function bar() {
  // ...
}
export function baz() {
  // ...
}
// 新增函数时，只需添加对应的export function xxx()即可

// 导入当前模块的所有命名导出作为命名空间对象
import * as mylib from './mylib.mjs';

// 将该命名空间对象作为默认导出
export default mylib;

原理说明 #

• ES模块允许在模块内部导入自身的命名导出，import * as mylib会收集当前模块所有的命名导出，形成一个只读的命名空间对象。
• 将这个对象作为默认导出后，用户通过import mylib from "./mylib.mjs"导入的就是包含所有命名函数的对象，和import * as mylib得到的内容一致。
• 后续新增函数时，只需添加新的export function xxx()，无需修改默认导出的代码，完全避免了遗漏的问题。

关于ES模块中的"exports"等价物 #

ES模块中没有CommonJS那种可动态修改的exports变量，因为ES模块是静态分析的，所有导出在编译阶段就已确定，不支持运行时动态添加导出。但上面的方案通过静态的命名空间导入，实现了和CommonJS类似的“一次定义，自动同步导出”的效果，完美适配你的需求。

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