ES Modules 的统一入口通过逻辑聚合与显式依赖声明实现，以 index.js 为语义化启动点，仅初始化配置、加载核心模块并挂载应用，配合 barrel 文件集中导出 API，HTML 中需用 显式加载。
在多模块项目中，ES Modules 的统一入口不是靠一个“主文件”硬性串联所有模块，而是通过逻辑聚合 + 显式依赖声明来实现的。它不追求物理上只加载一个 JS 文件，而是让应用有一个清晰、可控、可维护的启动点。
用 index.js 作为语义化入口
把项目根目录或 src/ 下的 index.js（或 main.js）当作启动入口——它本身不写业务逻辑，只负责初始化配置、加载核心模块、挂载应用。
- 它 import 核心服务（如路由、状态管理、i18n 初始化函数）
- 它调用 render() 或 app.mount() 启动 UI
- 它不直接 import 所有页面组件，而是按需触发（比如路由懒加载）
导出统一 API 的 barrel 文件
在模块集合目录（如 src/utils/ 或 src/api/）下建 index.js 作为 barrel 文件，集中 re-export 内部模块：
export { default as auth } from './auth.js';
export { default as user } from './user.js';
export { getPosts, createPost } from './posts.js';
外部只需 import { auth, getPosts } from '@/api'，路径干净，变更集中管理。
立即学习“Java免费学习笔记（深入）”；
入口 HTML 显式加载 ESM 入口脚本
HTML 中必须用 <script type="module" src="./src/index.js"></script> 启动整个模块链。浏览器会根据 import 语句自动解析依赖图，无需手动拼接多个 script 标签。
- 确保所有模块路径是相对或绝对 URL（支持
./、../、/，不支持 bare specifiers 如lodash，除非配了 import maps） - 开发时推荐用 Vite 或 Webpack，它们能处理别名（如
@/components）并转为合法路径
避免常见误区
统一入口 ≠ 把所有代码塞进一个文件，也不等于强制同步加载全部模块。
- 不要在入口里 import 所有页面模块——这破坏懒加载，增大首屏体积
- 不要用
import('./xxx.js').then(...)在入口里“手动遍历加载”——失去静态分析优势，也难调试 - 不要省略
type="module"——否则浏览器按经典脚本执行，import/export 语法报错
