JavaScript中的模块化开发ES6：import与export详解

lichongyang

3 月前

下面给你整理一份 JavaScript ES6 模块化开发（import / export）详解，从基础语法、导出方式、导入方式，到实际开发最佳实践，全方位覆盖。

1️⃣ ES6 模块化概念

在 ES6 之前，JS 没有官方模块系统，常用的有：

IIFE（立即执行函数）
CommonJS（Node.js require / module.exports）
AMD（浏览器异步加载模块）

ES6 模块（ESM）是官方标准：

文件默认就是模块（带 export / import）
支持静态分析（Tree Shaking 可优化打包）
默认严格模式

2️⃣ Export 导出模块

ES6 有两种主要导出方式：

2.1 命名导出（Named Export）

// math.js
export const PI = 3.14159;

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

export class Circle {
  constructor(radius) {
    this.radius = radius;
  }
}

✅ 特点：

可导出多个

导入时必须使用相同的名字（可用 as 重命名）

2.2 默认导出（Default Export）

// logger.js
export default function log(message) {
  console.log(message);
}

// 也可以导出对象
// export default { log, warn, error }

✅ 特点：

每个模块只能有一个默认导出

导入时可以任意命名

2.3 混合导出

// utils.js
export const sum = (a, b) => a + b;
export const multiply = (a, b) => a * b;

export default function log(msg) {
  console.log(msg);
}

3️⃣ Import 导入模块

3.1 导入命名导出

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

console.log(PI);
console.log(add(1, 2));

const c = new Circle(5);

3.1.1 重命名

import { add as sum } from './math.js';

console.log(sum(2, 3));

3.2 导入默认导出

import log from './logger.js';

log("Hello World");

注意：默认导出无需大括号

3.3 导入全部内容

import * as Utils from './utils.js';

console.log(Utils.sum(1,2));
Utils.default("打印日志"); // default 对应默认导出

3.4 混合导入

import log, { sum, multiply } from './utils.js';

log("测试");
console.log(sum(2, 3));

4️⃣ 动态导入（Dynamic Import）

ES2020 引入 import() 函数式导入，返回 Promise：

const loadModule = async () => {
  const math = await import('./math.js');
  console.log(math.add(1,2));
};

loadModule();

✅ 优势：

按需加载模块（懒加载）
支持条件加载

5️⃣ TypeScript 中的模块化

ES6 模块与 TS 完美结合：

// types.ts
export interface User {
  id: number;
  name: string;
}

// app.ts
import { User } from './types';

const u: User = { id: 1, name: "Alice" };

6️⃣ 实际开发中常见用法

6.1 工具函数模块

// utils.js
export const formatDate = date => date.toISOString();
export const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

导入：

import { formatDate, randomNum } from './utils.js';

6.2 配置模块

// config.js
export default {
  apiBase: 'https://api.example.com',
  timeout: 5000
};

导入：

import config from './config.js';
console.log(config.apiBase);

6.3 Vue 组件模块化

// components/Button.vue
&lt;script>
export default {
  name: 'MyButton'
}
&lt;/script>

在父组件导入：

import MyButton from './components/Button.vue';

export default {
  components: { MyButton }
}

7️⃣ Tree Shaking 原理

ES6 模块支持 静态分析，打包工具（如 Webpack/Rollup/Vite）可以：

只打包实际使用的导出
剔除未使用的代码

// utils.js
export const used = () => {};
export const unused = () => {};

import { used } from './utils.js'; // 打包时 unused 会被剔除

8️⃣ 总结

方面	ES6 模块特点
导出方式	命名导出 `export`、默认导出 `export default`
导入方式	`import { }`、`import default`、`import * as`
静态分析	支持 Tree Shaking
动态导入	`import()` 支持懒加载和条件加载
TS 结合	可为模块添加类型约束，接口、类型、类都能导出