ES6模块化中js文件怎么用import和export交互

模块交互的基础：准备运行环境与路径规范

在旧版 JavaScript 体系中，通过普通 <script> 标签加载的代码均处于全局作用域（Script 模式），所有在顶层定义的变量都会自动挂载到全局对象（如浏览器的 window）上，容易引发命名冲突。而在 ES6 模块化标准（ESM）下，每个文件必须在专门的“模块模式（Module 模式）”下执行，否则直接编写 import 或 export 语句会直接触发语法解析错误。

1. 浏览器环境中的模块启用

在 HTML 文件中引入作为入口的 JavaScript 脚本时，必须显式声明 type="module" 属性。该属性会告知浏览器内核按照 ESM 规范解析代码，并自动为脚本开启延迟加载（相当于默认带有 defer 效果），等待 HTML DOM 结构解析完成后再行执行：

<!-- 声明 type="module" 开启 ES6 模块支持 -->
<script type="module" src="./src/main.js"></script>

2. Node.js 环境中的模块启用

Node.js 历史上长期默认采用 CommonJS 规范（即 require 与 module.exports）。为了让 Node.js 原生识别 ES6 的 import 与 export，有两种标准配置方式：

• 推荐方案（项目级）：在项目根目录生成 package.json（执行终端命令 npm init -y），并在其中配置字段 "type": "module"。配置后，该目录下所有的 .js 文件都会自动被 Node.js 判定为 ES6 模块。
• 单文件方案：若不便修改 package.json，可以直接将需要进行交互的 JS 文件扩展名显式重命名为 .mjs（例如 math.mjs 与 main.mjs），Node.js 会自动将其视作 ESM 执行。

3. 严格的相对路径书写约束

无论是浏览器还是 Node.js 原生 ESM，导入本地自定义 JS 文件时，路径字符串必须以 ./（当前目录）或 ../（上级目录）明确开头，并且在绝大多数原生运行时中必须显式书写完整的 .js 后缀名。例如 import { add } from './math.js'; 是合法有效的，而写成省略后缀的 import { add } from './math'; 或缺少前缀的 import { add } from 'math.js'; 均会被判定为找不到模块或裸导入错误。

命名导出与导入（Named Export / Import）：精准按需交互

当一个功能模块需要向外部输出多个独立的方法、常量或工具类时，推荐使用“命名导出（Named Export）”。命名导出允许导出方明确暴露若干具有具体名称的标识符，导入方在接收时通过花括号 { } 挑选自身所需的标识符进行精确按需加载。

命名导出的三种语法形态

在导出端文件（如 math.js）中，可以通过以下三种方式完成命名导出：

• 形态一：声明时即时导出。在变量、常量或函数声明语句前直接添加 export 关键字：

  export const PI = 3.1415926;
  export function add(a, b) {
    return a + b;
  }

• 形态二：声明后集中列表导出。先在模块内部完成常规的声明与逻辑编写，在文件底部使用 export { ... } 进行集中打包：

  const subtract = (a, b) => a - b;
  const multiply = (a, b) => a * b;
  
  // 统一暴露符号列表（注意此处的花括号不是普通对象字面量）
  export { subtract, multiply };

• 形态三：通过 as 关键字重命名导出。如果模块内部的函数名较为冗长或存在内部专有前缀，可以使用 as 赋予更简洁的对外接口名称：

  function rawDivideOperation(a, b) {
    if (b === 0) throw new Error('除数不能为0');
    return a / b;
  }
  
  // 将内部函数以 "divide" 的别名导出
  export { rawDivideOperation as divide };

命名导入的三种语法形态

在消费端文件（如 main.js）中，可以针对命名导出采用对应的接收方式：

• 形态一：按需花括号解构导入。花括号内的名称必须与导出端符号表暴露的名字完全保持一致：

  import { PI, add, divide } from './math.js';
  
  console.log(add(10, 20));    // 输出: 30
  console.log(divide(20, 4));  // 输出: 5

• 形态二：导入端重命名解决名称冲突。如果导入的函数名与当前文件已有变量同名，使用 as 在当前文件内为其分配局部别名：

  const add = '我是本地自定义的局部变量';
  
  // 使用 as 将导入的 add 函数重命名为 mathAdd
  import { add as mathAdd } from './math.js';
  
  console.log(add);            // 输出: 我是本地自定义的局部变量
  console.log(mathAdd(5, 3));  // 输出: 8

• 形态三：命名空间全量聚合导入。当导出项极多且需要保持统一归属时，使用通配符 * as [Namespace] 将所有导出项挂载到一个对象下：

  import * as MathUtils from './math.js';
  
  console.log(MathUtils.PI);            // 输出: 3.1415926
  console.log(MathUtils.multiply(6, 7)); // 输出: 42

默认导出与导入（Default Export / Import）：传递模块核心能力

当一个 JavaScript 模块的核心职责非常明确单一（例如代表一个用户数据服务类、一个特定的功能函数或一个页面组件）时，最符合工程直觉的方式是使用“默认导出（Default Export）”。

1. 默认导出的核心规则

在任何一个独立的 JS 文件中，最多只能存在一个 export default。默认导出可以直接导出匿名函数、类或表达式对象：

// 文件路径: ./services/logger.js
export default class Logger {
  constructor(moduleName) {
    this.moduleName = moduleName;
  }

  info(message) {
    console.log(`[${this.moduleName}] INFO: ${message}`);
  }
}

2. 默认导入的语法特权：无花括号与自由命名

由于每个模块最多只有一个默认导出，导入端在消费时不需要使用花括号 { }，并且可以根据调用方的语义习惯任意给导入的实体命名：

// 文件路径: ./main.js
// 可以自由命名为 Logger，也可以命名为 AppLogger、MyCustomLogger
import AppLogger from './services/logger.js';

const logger = new AppLogger('AuthService');
logger.info('用户成功登录'); // 示例输出: [AuthService] INFO: 用户成功登录

3. 混合导出模式（Mixed Export）

在成熟的库设计中，往往会把“主要实体”作为默认导出，同时将与该实体紧密相关的“常量、辅助配置”作为命名导出并存。在导入端，只需将默认导入置于最前，后跟逗号及花括号命名导出：

// 文件路径: ./services/apiClient.js
const defaultClient = {
  request(url) {
    return `Fetching ${url}`;
  }
};

// 默认导出核心客户端实例
export default defaultClient;

// 辅助命名导出
export const DEFAULT_TIMEOUT = 5000;
export const API_VERSION = 'v2.1';

在消费模块中一次性接收全部能力：

// 文件路径: ./main.js (注意：默认导入必须写在花括号前面，中间用逗号分隔)
import client, { DEFAULT_TIMEOUT, API_VERSION } from './services/apiClient.js';

console.log(API_VERSION);             // 输出: v2.1
console.log(client.request('/users')); // 输出: Fetching /users

4. 动态按需导入（Dynamic import()）

标准的 import ... from ... 是静态编译的，必须写在文件的顶级作用域，不能包裹在 if 条件分支、循环体或事件监听函数中。然而在许多实际业务场景中，某些模块体积庞大（如数据可视化图表库），只有在用户触发特定行为时才需要下载与执行。

此时应采用函数形式的 import(specifier)。它返回一个 Promise，支持运行时动态计算模块路径与异步分包加载：

const downloadBtn = document.getElementById('download-btn');

downloadBtn.addEventListener('click', async () => {
  // 只有在用户点击按钮后，才发起网络请求动态加载 pdfGenerator 模块
  try {
    const { generatePdfReport } = await import('./utils/pdfGenerator.js');
    generatePdfReport({ title: '财务月度报表' });
  } catch (err) {
    console.error('动态加载模块失败:', err);
  }
});

核心底层机制与必须掌握的边界规则

要真正掌握 ES6 模块的交互逻辑，必须理解其底层不同于传统脚本与 CommonJS 的四项核心机制。许多难以排查的 Bug 往往源于对这些底层的误解。

1. 实时只读引用（Live Binding）：不是值拷贝

在 CommonJS 中，require() 输出的是一个对象的浅拷贝（快照）。一旦模块加载完毕，导出端后续修改其内部基础类型变量，导入端是无法感知的。

而 ES6 模块机制建立的是实时绑定（Live Binding）：导入方获取的是导出端变量在环境记录中的活引用指针。如果导出端内部提供了定时器或修改函数来变更变量，导入端读取到的值会即时随之刷新：

// 文件 A: counter.js
export let currentCount = 0;

export function increment() {
  currentCount++; // 导出模块内部负责修改状态
}

// 文件 B: app.js
import { currentCount, increment } from './counter.js';

console.log(currentCount); // 输出: 0
increment();
console.log(currentCount); // 实时同步输出: 1

// 严禁以下操作！试图在导入端直接修改导入的只读绑定：
// currentCount = 99; // 抛出 TypeError: Assignment to constant variable

2. 编译期静态分析与语句自动提升（Hoisting）

JavaScript 引擎在正式运行代码之前，会优先遍历代码构建模块依赖图谱（Module Graph）。所有的静态 import 声明都会被自动提升到当前文件的最顶层优先执行。因此，即使把 import 语句写在文件最底部，它依然会在文件首行的常规可执行代码之前被执行。为了保持代码可读性与团队规范，务必统一将所有 import 语句整齐放置在文件顶部。

3. 单例实例（Singleton）与独立作用域

如果在同一个工程的多个不同文件（如 pageA.js 和 pageB.js）中分别通过相同路径 import './database.js'，database.js 文件顶层的初始化代码只会执行一次。JavaScript 运行时会对已解析的模块进行全局缓存，后续所有引入操作均共享这同一个模块实例。此外，每个模块文件内的顶层 this 均为 undefined，绝不污染全局作用域。

4. 循环依赖（Circular Dependency）防范

当文件 A 引用文件 B，同时文件 B 又反向引用文件 A 时，ES6 模块能够保证加载过程不发生死锁，但由于代码求值顺序的存在，后执行的模块在访问先执行模块的顶层变量时，可能会读到尚未初始化的状态（表现为 undefined 或触发暂存死区 ReferenceError）。防范循环依赖的最佳实践是：避免在模块顶层代码中立即读取对方导出的变量，尽量将跨模块交互逻辑封装在函数或方法体内，使其在实际调用时才触发求值。

常见报错表现与排查修复清单

在实际编码中遇到模块交互问题时，可以根据以下具体报错信息快速对号入座定位并解决：