模块化 import export
以前把所有 JS 堆在一个文件里，代码一多就不可维护。ES Module 让代码按功能拆成多个文件，通过 export 导出、import 导入。浏览器里需要在 script 标签上加 type="module" 才能使用。
两种导出：命名导出 export const/function，一个模块可以有多个，导入时要花括号且名字对得上（可用 as 改名）；默认导出 export default，一个模块只有一个，导入时不加花括号、名字随便起。Vue/React 组件文件都是「一个文件一个默认导出的组件」。
本节的代码示例属于「展示型」，无法在单文件弹层里直接运行（需要多文件或构建工具配合），重点记住语法形态和两种导出的区别即可。工程上，Vite/Webpack 会把散落的模块打包合并成浏览器友好的产物。
本节要点命名导出可有多个、导入加花括号；默认导出每模块一个、导入不加花括号；浏览器使用模块要 type="module"。
代码
// ---- math.js ----
export const PI = 3.14159; // 命名导出
export function add(a, b) { // 命名导出
return a + b;
}
export default class Calculator { // 默认导出（仅一个）
multiply(a, b) { return a * b; }
}
// ---- main.js ----
// 默认导出不加花括号、可改名；命名导出要花括号
import Calculator, { PI, add, add as plus } from './math.js';
console.log(PI);
console.log(add(1, 2), plus(3, 4));
console.log(new Calculator().multiply(3, 4));
// 浏览器使用模块的写法：
// <script type="module" src="main.js"></script>
// Node 旧写法是 CommonJS：const fs = require('fs')📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读