JavaScript模块化开发：import与export用法详解

当一个前端项目从简单脚本逐渐膨胀到数千行代码时，传统的开发方式往往会遇到瓶颈：多个 <script> 标签堆叠引入，变量和函数直接暴露在全局作用域中，不仅极易引发命名冲突，还难以理清文件之间的先后加载依赖。ECMAScript 2015（ES6）正式确立的原生模块规范（ES Modules，简称 ESM），通过标准的 export 与 import 语法，彻底解决了代码分割、作用域隔离和按需复用的难题。本文将全面梳理 ES 模块的运行机制、核心语法细节与实际工程规范，帮助你在实际项目中熟练应用模块化开发。

一、模块化运行前提：配置 ESM 执行环境

在直接编写 import 和 export 之前，必须确保代码运行环境知晓当前文件应被视作 ES 模块，而非传统的全局脚本或 CommonJS 模块。浏览器与 Node.js 拥有各自的启用标准：

1. 浏览器环境配置

在 HTML 中引入 JavaScript 脚本时，必须为 <script> 标签显式添加 type="module" 属性：

<!-- 声明这是一个 ES 模块入口 -->
<script type="module" src="./src/main.js"></script>

添加此属性后，浏览器会赋予该脚本以下核心特性：

• 独立模块作用域：顶层声明的变量不再挂载到全局对象（如 window）上。
• 默认严格模式：模块内部代码自动在 "use strict" 模式下执行。
• 延后执行（Defer）：模块脚本默认异步下载，并在 DOM 树解析完毕后、DOMContentLoaded 事件触发前按依赖顺序执行。
• CORS 跨域限制：通过模块加载的远程或本地脚本受同源策略限制，本地测试需使用 HTTP 服务（如 VS Code Live Server 或 Vite）访问，不能直接通过 file:// 协议打开。

2. Node.js 环境配置

在 Node.js 中使用 ES 模块有两种标准化方式：

• 方式 A（推荐）：在项目的 package.json 根对象中配置 "type": "module"，此时项目内所有 .js 文件均默认作为 ES 模块执行。
• 方式 B：将具体文件扩展名显式保存为 .mjs，Node.js 会单独将此类文件当作 ES 模块处理。

二、export 导出用法全解

export 用于从模块内部向外暴露接口，供其他文件引用。ES 模块的导出体系分为两大类型：命名导出（Named Export） 与 默认导出（Default Export）。

1. 命名导出（Named Export）

命名导出允许一个模块导出多个变量、常量、函数或类。导入方在引入时必须指定相对应的名字。

（1）声明时直接导出

在变量、函数或类的声明语句前直接添加 export 关键字：

// mathUtils.js
export const PI = 3.1415926;
export let currentScale = 1.0;

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

export class Calculator {
  multiply(a, b) {
    return a * b;
  }
}

（2）集中列表导出与别名重命名

先在模块内完成常规声明，随后使用大括号 export { ... } 集中暴露。这并非定义一个对象字面量，而是导出语法的特定结构。如果希望对外暴露不同的名称，可以使用 as 关键字设置别名：

// format.js
const internalPrefix = "[LOG]";
function formatData(data) {
  return `${internalPrefix} ${data}`;
}
function parseData(str) {
  return JSON.parse(str);
}

// 统一对外导出，并通过 as 重命名
export {
  formatData as format,
  parseData as parse
};

2. 默认导出（Default Export）

默认导出代表当前模块的“主要功能”或“默认实体”。一个模块文件只能拥有一个 export default。

// Logger.js
export default class Logger {
  log(msg) {
    console.log(`[Info] ${msg}`);
  }
}

默认导出后可以直接跟表达式、函数声明或类声明，甚至可以是一个匿名字面量：

// config.js
export default {
  env: "production",
  timeout: 5000
};

三、import 导入用法全解

import 用于在另一个模块中加载并使用已经导出的功能。根据导出形式与使用诉求，import 具备多种精确的写法。

1. 导入命名导出

导入命名导出时，变量名必须被包含在花括号 { } 中，名称必须与导出模块中的标识符保持一致：

import { PI, add } from './mathUtils.js';

console.log(PI); // 3.1415926
console.log(add(10, 20)); // 30

2. 使用 as 重命名避免冲突

当两个不同模块导出了同名函数，或者当前文件已有同名变量时，可以使用 as 为导入的成员指定当前模块专属的别名：

import { add as mathAdd } from './mathUtils.js';
import { add as domAdd } from './domOperations.js';

mathAdd(1, 2);
domAdd(document.body, newElement);

3. 命名空间全量导入（* as）

如果目标模块包含大量命名导出，逐一列举较为繁琐，可以使用 * as [命名空间对象] 将所有命名导出打包挂载到一个单独的对象上：

import * as MathUtils from './mathUtils.js';

console.log(MathUtils.PI);
console.log(MathUtils.add(5, 5));

4. 导入默认导出

引入默认导出时，不需要加花括号，并且导入端可以随意自定义命名：

// 无论导出模块叫什么，此处均可自由命名
import CustomLogger from './Logger.js';

const logger = new CustomLogger();
logger.log("模块化加载成功");

5. 混合导入（默认导出与命名导出同时引入）

如果一个模块同时包含默认导出与多个命名导出，可以在单行 import 语句中结合使用：默认成员置于大括号之前，命名成员放在大括号之内。

// 假设 api.js 默认导出了 client 实例，命名导出了 GET、POST 常量
import apiClient, { GET, POST } from './api.js';

6. 仅执行副作用的导入

某些模块的代码目的仅仅是初始化全局配置、注册 Polyfill 或加载 CSS 样式，不需要读取任何导出项。此时可以直接书写模块路径：

// 仅触发该脚本内部的代码执行，不引入任何局部变量
import './polyfills.js';
import './theme.css';

四、模块聚合与动态按需加载

除了常规的导入导出，ESM 还支持在大型工程中极其常用的复合重导出模式与运行期动态导入机制。

1. 复合重导出（Re-exporting / 模块聚合）

在设计公共组件库或工具包时，通常会在子目录中建立 index.js 作为统揽入口。使用 export ... from ... 可以不必先 import 再 export，实现一步中转：

// components/index.js (作为统一对外分发门面)
export { Button } from './Button.js';
export { Input, Checkbox } from './Forms.js';
export { default as Modal } from './Modal.js'; // 将 Modal 的默认导出重命名并作为命名导出暴露
export * from './Constants.js'; // 导出 Constants 中的所有命名导出

2. 静态 import 与 动态 import() 对比

常规的 import 声明是静态的，必须位于模块顶层，不能嵌套在 if 分支、循环或函数内部。浏览器和打包工具在代码运行之前（编译/解析期）就会收集所有依赖，构建出整棵模块依赖树。

然而在许多业务场景下，我们希望实现按需加载（例如路由切换、用户点击某个大图预览组件或条件判断后才拉取代码）。ES2020 引入了函数形式的 import(specifier)：

• 可以在任何逻辑语句、函数或事件监听器内部调用。
• 接收模块路径字符串，返回一个解析为该模块对象的 Promise。
• 配合 async/await 或 .then() 使用。

// 用户点击按钮时才动态加载高耗能模块
const button = document.getElementById("export-btn");

button.addEventListener("click", async () => {
  try {
    // 动态拉取 xlsx 导出模块，实现懒加载
    const xlsx = await import('./xlsxExporter.js');
    xlsx.exportTableToExcel("user-data-table");
  } catch (err) {
    console.error("模块加载失败：", err);
  }
});

五、常见开发误区与工程最佳实践

虽然 ES 模块语法直观，但在实际开发和构建中，开发者仍经常因细节疏漏而引发运行报错：

结语

ES 模块化机制（import 与 export）作为现代 JavaScript 的原生标准，打破了早期由于缺乏语言级规范而依赖各类打包包装器的局面。掌握命名导出的精准树摇特性、默认导出的组件化封装优势、以及动态 import() 的按需加载能力，能够帮助开发者构建出高内聚、低耦合、易维护且具备极致性能的现代化前端与 Node.js 应用程序。