ES6模块通过import和export实现静态引用，支持命名与默认导出，结合Webpack、Vite、Rollup等工具优化构建；Vite利用原生ESM提升开发体验，Rollup适合库打包，合理配置可提升性能与维护性。
模块化开发是现代 JavaScript 开发的核心实践之一。ES6 模块（ES Modules，简称 ESM）的出现让原生支持模块成为可能，不再依赖第三方库或运行时加载器。结合打包工具，开发者可以高效组织代码、提升性能并实现自动化构建流程。以下是关于 ES6 模块与主流打包工具的深度指南。
ES6 模块：语法与工作机制
ES6 模块通过 import 和 export 关键字实现静态模块引用，支持命名导出和默认导出。
命名导出：
允许一个模块导出多个值。
// math.js export const add = (a, b) => a + b; export const multiply = (a, b) => a * b;
默认导出：
每个模块只能有一个默认导出，适合导出主功能或类。
// calculator.js
export default class Calculator {
constructor() { ... }
}
导入方式：
- 导入命名导出：
import { add, multiply } from './math.js'; - 导入默认导出：
import Calculator from './calculator.js'; - 混合导入：
import Calculator, { add } from './index.js'; - 整体导入：
import * as MathUtils from './math.js';
ES 模块是静态的，意味着导入路径必须是字符串字面量，不能动态拼接。这为打包工具提供了优化空间，如摇树（tree-shaking）。
打包工具的作用与选型
尽管浏览器已支持 ESM，但在生产环境中仍需打包工具处理依赖管理、代码压缩、模块合并和兼容性转换等问题。
Webpack：
功能全面，适用于大型项目。支持代码分割、懒加载、资源模块和丰富的插件生态。
- 配置入口（entry）、输出（output）、加载器（loader）和插件（plugin）
- 使用 babel-loader 转换 ES6+ 语法
- 通过 splitChunks 实现公共代码提取
Vite：
基于原生 ESM 的新一代构建工具，利用浏览器对 ES 模块的支持实现快速冷启动。
- 开发阶段无需打包，直接按需加载模块
- 生产构建使用 Rollup，输出高度优化的静态资源
- 支持 React、Vue、TypeScript 等框架开箱即用
Rollup：
专注于库打包，生成更干净、高效的代码，常用于发布 npm 包。
- 天然支持 tree-shaking，去除未使用代码
- 可输出多种格式（ESM、CommonJS、UMD）
- 配置简洁，适合中小型库项目
实际开发中的最佳实践
合理使用模块系统和打包工具能显著提升项目可维护性和性能。
模块设计原则：
- 保持模块职责单一，避免巨型文件
- 使用 index.js 统一导出子模块，简化导入路径
- 避免循环依赖，可通过事件或依赖注入解耦
构建优化建议：
- 启用 source map 方便调试
- 配置 .babelrc 只转译必要语法，保留原生模块结构给打包工具处理
- 使用 dynamic import() 实现路由级懒加载
- 设置 externals 排除不需打包的依赖（如 React CDN 引入）
开发环境体验：
Vite 利用 esbuild 预构建依赖，热更新速度远超 Webpack。对于新项目，尤其是基于 Vue 或 React 的前端应用，推荐优先尝试 Vite。
基本上就这些。掌握 ES6 模块机制和主流打包工具的特点，能让你在不同场景下选择最合适的方案，无论是开发应用还是发布库。关键是理解模块如何被解析、转换和最终输出。不复杂但容易忽略细节。
