ES6模块非语法糖，带来静态结构、显式依赖与编译期检查；支持树摇、作用域隔离、循环引用明确定义；推荐具名导出，分层组织为domain/adapters/ui/shared，并通过exports字段兼顾ESM与CommonJS。
ES6 模块（import/export）不是语法糖，它带来了静态结构、明确依赖和编译期检查，从根本上改变了 JavaScript 的组织逻辑和协作方式。
模块组织：从“脚本拼接”到“显式依赖图”
过去用 IIFE 或全局变量挂载的方式，模块边界模糊，谁依赖谁靠文档或经验判断。ES6 要求每个文件是一个独立模块，默认严格模式，且 import 必须在顶层、不能动态（除非用 import() 动态导入）。这意味着：
- 依赖关系一目了然——打开文件就能看到顶部的
import列表 - 没有隐式全局污染——每个模块作用域隔离，不会意外覆盖
window.xxx - 支持树摇（tree-shaking）——打包工具能静态分析未使用的
export并剔除 - 循环引用有明确定义行为（部分绑定、临时死区），不再是不可控的
undefined堆叠
开发方式转变：从运行时调试到编译期约束
以前改一个工具函数，可能要手动检查所有调用处是否兼容；现在借助模块接口，IDE 和类型系统（如 TypeScript）能立刻定位所有使用点，并在保存时提示导出签名变更的影响：
-
export default适合单一主要功能（如一个 React 组件、一个工具类），但不利于重命名导入和多导出混合 -
export const / function / class支持按需导入（import { debounce } from './utils'），也方便单元测试直接导入内部函数 - 推荐默认用具名导出，避免
export default造成的“匿名性”——比如import xxx from 'lodash'不知道xxx是什么，而import { throttle } from 'lodash'自解释性强得多
实际项目中的模块分层建议
不追求理论完美，而是让团队快速理解职责边界。常见合理分层：
立即学习“Java免费学习笔记（深入）”；
- domain/：纯业务逻辑（如订单状态流转、价格计算），无框架、无副作用，可直接单元测试
- adapters/：对接外部（API 请求封装、localStorage 包装、第三方 SDK 封装），隔离副作用
- ui/：组件层（React/Vue），只负责渲染与事件转发，逻辑外提
- shared/：跨域复用的常量、类型定义、通用 hook 或高阶函数，避免散落在各处
每个目录下保持 index.js 聚合导出（export { useAuth } from './auth'），上层只需 import { useAuth } from '@/shared'，不暴露内部路径细节。
构建与环境适配：模块不是万能钥匙
浏览器原生支持 type="module"，但 Node.js 默认仍用 CommonJS。现代方案已收敛：
- 开发阶段：Vite / Webpack / esbuild 直接处理 ES 模块，无需额外转译
- 发布包：同时提供
exports字段（支持import和require），例如：
"exports": {
".": { "import": "./dist/index.mjs", "require": "./dist/index.cjs" }
} - 注意：动态
import()返回 Promise，适合路由懒加载或条件加载，但不能用于替换静态依赖声明
