本文档解释了 Vue.js 核心仓库的 monorepo 结构和包架构。它涵盖了包的组织方式、依赖关系、构建配置和分发格式。有关构建系统实现的详细信息，请参阅 构建系统。
Vue.js 核心仓库被组织为一个 monorepo，包含多个具有特定职责的包。这种架构可以更好地分离关注点，支持现代打包工具的 tree-shaking，并为不同的使用场景提供灵活性。
来源
Vue.js monorepo 中的每个包都有特定的重点和职责
| 包 | 描述 | 主要职责 |
|---|---|---|
vue | 主入口包 | 导出所有公共 API；提供编译器集成 |
@vue/runtime-dom | DOM 相关运行时 | DOM 元素操作、事件处理、指令 |
@vue/runtime-core | 平台无关运行时 | 虚拟 DOM、组件系统、生命周期钩子 |
@vue/reactivity | 响应式系统 | 响应式对象、ref、computed、watchers |
@vue/compiler-dom | DOM 相关编译器 | DOM 相关解析和代码生成 |
@vue/compiler-core | 核心编译器 | 模板解析、AST 生成、转换 |
@vue/compiler-sfc | SFC 编译器 | .vue 文件解析和处理 |
@vue/compiler-ssr | SSR 编译器 | 服务器端渲染优化 |
@vue/server-renderer | SSR 运行时 | 服务器渲染、hydration |
@vue/shared | 通用工具 | 共享辅助函数和常量 |
来源
Vue.js 包构建为多种格式，以支持不同的环境和使用场景。
来源
| 格式 | 文件模式 | 目的 | 使用场景 |
|---|---|---|---|
| ESM 打包器 | *.esm-bundler.js | 适用于现代打包工具 | Webpack、Rollup、Vite 项目 |
| ESM 浏览器 | *.esm-browser.js | 直接浏览器使用 | <script type="module"> |
| CommonJS | *.cjs.js | Node.js 和旧打包器 | 服务器端，Jest 测试 |
| 全局/IIFE | *.global.js | 直接浏览器使用 | 不使用打包器的 `<script>` |
| 仅运行时 | *.runtime.* | 不带编译器的更小构建 | 预编译模板 |
| 生产 | *.prod.js | 压缩和优化 | 生产部署 |
每个包在其 `package.json` 的 `buildOptions.formats` 属性下定义了它支持的格式。
来源
Vue.js 包精心定义了其导出，以支持各种模块系统和环境。
来源
Vue.js 使用 Node.js 条件导出为每种环境提供正确的文件
此配置确保
来源
Vue.js 使用编译时常量和特性标志来有条件地包含功能和优化构建。
来源
在打包器构建中，特性标志将被替换为运行时变量
这允许最终用户通过构建配置来控制这些功能，而预构建的包默认包含所有功能。
来源
Vue.js 为开发和生产环境提供了特定的优化。
在开发模式下（__DEV__ === true）
开发模式独有代码示例
来源
生产构建（*.prod.js）
这使得生产部署的包体积显著减小。
来源
Vue.js 的包架构经过精心设计，可在不同环境中提供最佳的开发人员和用户体验。具有清晰包职责的 monorepo 结构实现了可维护的代码组织，而复杂的构建系统则为各种使用场景创建了优化的包。
此架构的主要优势包括