构建工具通过别名解析、自动补全扩展名、依赖图优化及远程模块统一管理，解决ES Modules原生限制：Vite/Webpack/Rollup支持paths别名；自动补全.js后缀；Tree Shaking、代码分割、裸说明符映射；importmap动态加载远程模块。
构建工具自动解析别名路径
ES Modules 原生不支持 TypeScript 的 paths 别名（如 @/components），但主流构建工具能接管路径解析。Vite、Webpack 和 Rollup 都内置别名支持，只需在配置中声明：
- Vite：在
vite.config.js中用resolve.alias，例如{ '@': path.resolve(__dirname, 'src') } - Webpack：在
resolve.alias中配置，同时确保resolve.extensions包含'.js'（避免因缺扩展名报错） - Rollup：配合
@rollup/plugin-alias插件，写法类似
配置后，import { Button } from '@/ui/Button.js' 就能被正确转为物理路径，浏览器运行时不再报 Module not found。
自动补全 .js 扩展名
浏览器 ESM 要求 import 路径必须带 .js 后缀，但手写太易出错。构建工具可统一处理：
- Vite 默认开启
resolve.extensions自动补全，允许写import './utils'，内部转成./utils.js - Webpack 需显式配置
resolve.extensions: ['.js', '.ts']，并启用resolve.fullySpecified: true以兼容 ESM 规范 - Rollup 不自动补全，需搭配
@rollup/plugin-node-resolve并设extensions选项
这层抽象让开发时写路径更简洁，又保证输出符合浏览器要求。
立即学习“Java免费学习笔记（深入）”；
模块预编译与依赖图优化
构建工具在打包阶段会静态分析所有 import 语句，生成完整的依赖图，并据此做深度优化：
- Tree Shaking：剔除未使用的导出，减小最终体积（前提是使用 ES Module 语法，CommonJS 无法有效摇树）
- 代码分割：通过
import()动态导入触发分包，配合路由或功能模块懒加载 - 入口映射：将裸说明符（如
'lodash'）重写为 CDN 地址或本地路径，替代手动写https://cdn.skypack.dev/lodash@4.17.21
比如 Vite 开发服务器会把 import _ from 'lodash' 自动代理到 Skypack，而生产构建则可替换为本地 minified 版本。
统一处理远程与本地模块
现代项目常混合使用本地组件和远程 ES Module 组件（如低代码平台的插件体系）。构建工具可统一管理加载逻辑：
- 用
build.rollupOptions.external排除远程模块，避免打包进 bundle - 配合
importmap或自定义插件，在构建时生成<script type="importmap">注入 HTML - 对远程模块 URL 加版本哈希或时间戳，规避缓存问题
这样既保留 ESM 的模块边界优势，又实现运行时动态拉取与热更新能力。
