ES6 Module 介绍

ES6 Module 是 ECMAScript 6 推出的官方原生模块化方案，用于解决 JavaScript 早期没有模块化、全局变量污染、依赖混乱、无统一标准等问题，是目前前端工程化、大型项目开发的主流模块化规范。

一、核心作用

• 实现代码拆分与复用，每个模块拥有独立作用域，避免全局变量冲突。
• 明确依赖关系，让代码结构更清晰、可维护。
• 支持静态编译，可实现 Tree‑Shaking 优化打包体积。
• 统一浏览器与 Node.js 的模块化标准，取代之前 CommonJS、AMD、CMD 等混乱局面。

二、导出方式

1. 命名导出

一个模块可导出多个变量、函数或类。

// 方式一
export const a = 1;
export function fn() {}

// 方式二
const b = 2;
export { b };

2. 默认导出

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

export default function() {}

三、导入方式

1. 导入命名导出

import { a, fn } from './module.js';

2. 导入默认导出

import defaultFn from './module.js';

3. 全部导入

import * as module from './module.js';

四、ES6 Module 与 CommonJS 的核心区别

1. 加载时机

   • CommonJS：运行时动态加载
   • ES6 Module：编译时静态加载

2. 导出值性质

   • CommonJS：导出是值的拷贝
   • ES6 Module：导出是值的引用，原模块更新，导入处同步变化

3. 严格模式

   • CommonJS：默认非严格模式
   • ES6 Module：自动启用严格模式

4. 顶层 this

   • CommonJS：this 指向当前模块
   • ES6 Module：this 为 undefined

5. 环境与优化

   • CommonJS：主要用于 Node.js，不支持 Tree‑Shaking
   • ES6 Module：浏览器与 Node 通用，支持 Tree‑Shaking

Tree-Shaking（摇树优化）是 ES6 Module 专属的代码优化技术，核心是在打包时，自动剔除项目中未被使用的无用代码，减少打包体积、提升运行性能。

1. 动态加载
   • CommonJS：require 支持动态加载
   • ES6 Module：静态 import 不支持动态，可通过 import() 实现动态加载

五、使用特点

• 模块内变量、函数默认局部作用域，不污染全局。
• 浏览器中使用需在 <script> 标签添加 type="module"。
• 导入路径必须完整，支持相对路径与绝对路径。
• 是现代前端工程化（Webpack/Vite/Rollup）的基础模块化规范。