JavaScript 模块化import/export完整指南（附代码示例）

模块化import/export这个话题，网上的文章要么太浅，要么一上来就堆术语。本文换个方式：从你最常遇到的场景出发，逐步深入。

聊聊模块化import/export的重要性

如果把JavaScript开发比作盖房子，模块化import/export就是其中一块重要的砖。砖虽小，缺了它房子就盖不牢。

吃透模块化import/export：核心概念梳理

• 遇到模块化import/export相关的问题，先看错误信息，大部分线索都藏在报错里。
• 给模块化import/export相关的核心逻辑写单元测试，改动时才敢放手重构。
• 先理解模块化import/export的基本概念和适用场景，再动手写代码，避免边写边猜。
• 把模块化import/export用到项目中之前，先用最小化示例跑通流程。

接下来用代码实际演示一下模块化import/export。

模块化import/export代码实战

看代码更直观，ES 模块化 import / export：

// utils.js —— 按需导出
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export default class Calculator {}

// main.js —— 三种引入方式
import Calculator, { PI, add } from './utils.js';
import * as utils from './utils.js';   // 全部引入

// 动态引入：按需加载，减小首屏体积
const mod = await import('./heavy.js');

这些细节要注意

• 正则表达式写完要多测几个边界用例，贪心和转义最容易出错。
• 服务器时间要校准，分布式系统里时间差能引发诡异问题。
• 复杂问题拆成小问题逐个验证，比一次性调一大段效率高得多。
• 多人协作时先拉取最新代码再开发，能避免大量无意义的冲突。

写在最后

回顾一下：本文先聊了模块化import/export的基本概念，然后给出了实战示例，最后梳理了常见坑。希望这条思路能帮你把模块化import/export真正掌握。

---

遇见问题加 QQ23979811 协助处理