JavaScript 模块系统：ES6 import/export 语法

阶段一：配置运行环境并初始化项目

1. 打开 终端或命令行工具，导航 至目标工作目录，执行 mkdir es6-module-guide 创建 专用文件夹，并输入 cd es6-module-guide 进入 该目录。
2. 运行 npm init -y 生成 标准的 package.json 配置文件。
3. 打开 该配置文件，在 JSON 根对象内部 插入 "type": "module" 键值对。此配置项强制 Node.js 或构建工具将项目内所有 .js 文件解析为 ES 模块标准，而非旧版 CommonJS 规范。
4. 保存 文件并关闭编辑器。模块运行环境即告就绪。

阶段二：构建具名导出与导入流程

具名模块允许单个文件对外暴露多个独立接口，调用方必须使用严格匹配的名称进行提取。

1. 创建 基础工具文件 math-utils.js。
2. 编写 核心计算函数，并在声明前直接添加 export 标记：

   
   export function add(a, b) {
   return a + b;
   }

export const multiply = (a, b) => a * b;

**说明**：也可在文件末尾统一声明 `export { add, multiply };`，效果完全一致。
3. **创建** 业务入口文件 `app.js`。
4. **编写** 静态导入语句。**使用** 花括号精准映射外部标识符：
```javascript
import { add, multiply } from './math-utils.js';
console.log(add(10, 5));

5. 执行 node app.js 命令，终端将输出 15。验证导入链路畅通。

阶段三：实施默认导出与单例接收

默认导出专用于一个文件仅输出单一核心实体的场景，例如主组件、核心类或全局配置对象。

1. 创建 服务封装文件 api-service.js。
2. 定义 类或函数，并在其前 追加 export default 关键字：

   
   class DataService {
   query() { return { status: 200 }; }
   }

export default DataService;

**限制**：同一文件内**严禁出现** 第二条 `export default`。
3. **切换** 至 `app.js`，**编写** 对应的导入逻辑。**移除** 花括号，并**指定任意合法标识符**接收数据：
```javascript
import Api from './api-service.js';
const apiInstance = new Api();

4. 运行 代码验证。ES 引擎自动将 export default 绑定的实体赋值给左侧变量，无需名称对齐。

阶段四：处理命名冲突与批量引入

当跨文件导入的标识符重复，或需完整挂载第三方工具库时，需采用别名与命名空间语法。

1. 解决标识符冲突：从不同模块获取同名方法时，追加 as 关键字映射本地名称：

   import { format as formatDate } from './date-utils.js';
   import { format as formatNumber } from './number-utils.js';

2. 执行全量捕获：使用 星号运算符 * 打包目标模块的全部具名导出，并挂载至单一对象：

   import * as MathTools from './math-utils.js';
   MathTools.add(2, 2); // 必须通过点语法访问

   注意：此语法会阻断 Tree-Shaking 优化，强制打包完整模块内容。仅在全局命名空间隔离或遗留代码迁移时启用。

阶段五：配置动态导入与异步加载

静态导入指令会在文件解析初期同步执行，阻塞后续代码。针对体积庞大或按需触发的依赖，改用 动态函数调用。

1. 定位 触发加载的条件分支，替换 静态声明为 import() 表达式：

   async function initFeature() {
   const heavyModule = await import('./analytics-core.js');
   heavyModule.trackEvent('page_load');
   }

2. 包裹 调用逻辑于 async 函数体内，或使用 .then(data => ...) 链式处理返回的 Promise 对象。
3. 验证 资源加载时机。动态语法仅在代码实际执行到该行时发起 网络请求或文件读取，未执行分支绝不消耗带宽。

阶段六：建立聚合导出与层级透传

复杂项目需通过中间层集中暴露底层模块，避免调用方维护冗长路径。

1. 新建 索引文件 index.js，置于各功能模块父级目录。
2. 执行 重新导出操作。编写 export 语句直接透传 源模块接口，跳过 本地变量声明步骤：

   export { add } from './math-utils.js';
   export * from './date-utils.js'; // 批量透传

3. 修改 业务文件的引用路径，指向 聚合入口：import { add } from './utils/index.js';。
4. 利用 框架解析规则，缩写 路径为 import { add } from './utils';。构建工具将自动定位目录下的 index.js。

阶段七：核心运行规则校验与排错

严格对照下表审查代码结构，拦截常见语法异常：

继续执行以下底层排错动作：

1. 排查 Cannot use import statement outside a module 报错。此异常表明运行时环境仍按脚本模式加载。核对 package.json 是否遗漏 "type": "module"，或文件是否被误命名为 .cjs。
2. 切断 循环依赖链路。模块 A 引用 B，B 又反向引用 A，将导致 B 在 A 初始化完成前获取到 undefined 空值。抽取 共享状态至第三方 store.js，打破 闭环引用。
3. 验证 引用传递特性。导出对象或数组时，模块间共享同一块内存地址。修改 导入端 config.timeout = 5000 将直接变更 源文件数据。若需隔离状态，导出 克隆对象 JSON.parse(JSON.stringify(obj)) 或冻结实例。