前端框架的 root 是 UI 树的挂载入口，不是 Android Root；createRoot() 不会取得系统权限，root-config 也不是 su 管理器。本篇在一个可删除目录中把 React 与 Vue 分别挂载到两个 HTML 容器，随后用同一张图解释 single-spa 和 Composition Root 的边界。
你会完成什么#
- 建立两个真实 DOM container，并分别挂载 React 和 Vue。
- 在 DevTools 中区分 HTML 节点、框架 root/app 与子组件树。
- 从空选择器定位 “target container” 类错误。
- 看懂 single-spa root config 是生命周期编排，而不是系统权限中心。
- 停止本地 Vite、删除
node_modules所在实验目录，不污染全局环境。
先看结论#
| 名称 | 它负责什么 | 常见误解 |
|---|---|---|
| DOM container | HTML 中供框架接管的元素 | 它本身就是 React/Vue 组件 |
| React root | 让 React 管理一个 DOM 子树 | 能管理整台设备或获得 root 权限 |
| Vue root app/component | 应用实例和组件树入口 | 与操作系统文件系统 / 有关 |
| single-spa root config | 注册、路由和挂载多个微前端 | 应保存所有 secret/全局权限 |
| Composition Root | 在程序入口装配依赖 | Android Root 工具或目录路径 |
心智模型#
HTML document
├─ <div id="react-root"> → React createRoot(container) → React child tree
└─ <div id="vue-root"> → Vue createApp(App).mount() → Vue child tree
microfrontend：root config → route match → app mount/unmount
都只是对象树/生命周期入口；没有 Bootloader、boot image 或 su工具清单#
| 工具/概念 | 角色 | 什么时候用 | 来源与注意 |
|---|---|---|---|
React createRoot | 在指定 DOM node 建立 React root | React 18+ 客户端入口 | 同一 container 不应重复建 root；卸载用 root.unmount() |
Vue createApp | 从 root component 创建 app 并挂载 | Vue 3 应用入口 | mount selector 必须匹配现有元素 |
| Vite | 本地开发 server 与模块转换 | 本篇最小实验 | 只绑定 loopback；依赖仅装在实验目录 |
| single-spa root config | 注册微前端和路由生命周期 | 多前端需要独立部署/挂载时 | 共享全局状态会扩大故障面 |
| Pure.DI / Composition Root | 在入口集中装配依赖 | 理解通用架构术语时 | 不是 DOM node，也不是权限边界 |
| Browser DevTools | 检查 container、Console 和子树 | 定位挂载错误 | UI tree 隔离不等于 XSS 安全隔离 |
项目全景：Web、框架与通用库的 13 个项目，一个不漏#
13 个项目里的 root 多指组合根、微前端 root config、monorepo 根或聚合仓库，也混有 Android 安全和 DeFi 库。主题应是“为大型工程找到正确装配边界”。
| 技术路线 | 项目数 | 处理等级 | 在主题任务中的位置 |
|---|---|---|---|
| 依赖注入与 Composition Root | 2 | 候选路线 | 用 .NET 与 SwiftUI 示例把依赖的创建集中到组合根，验证业务对象不直接依赖具体基础设施。 |
| 微前端 Root Config | 3 | 候选路线 | 比较 single-spa、Angular 和多语言微前端的顶层路由、生命周期与共享依赖，先在本地验证挂载和卸载。 |
| Monorepo 与多根工作区 | 3 | 候选路线 | 用 VS Code、目录浏览器和 Obsidian 虚拟挂载说明多个项目根的发现、去重、权限和符号链接边界。 |
| 聚合仓库与工作区根 | 3 | 候选路线 | 解释 root repository/root workspace 如何聚合子项目、版本与构建工具；它描述工程结构，不代表系统权限。 |
| Android 安全与 DeFi 跨界库 | 2 | 候选路线 | 对 Root/VPN/模拟器拦截和 Solidity 核心库分别说明安全信号与合约风险，并指向更合适的专题，不混入框架操作步骤。 |
1. 依赖注入与 Composition Root · 2#
用 .NET 与 SwiftUI 示例把依赖的创建集中到组合根，验证业务对象不直接依赖具体基础设施。
本组共 2 项：2 个源项目、0 个 Fork，其中 0 项已归档。新手应先从“未归档的源项目”核对 README 和 Release，再用 Fork 追溯设备适配或历史差异；分组本身不等于推荐安装。
| 项目 | 上游定位与识别信号 | 状态与采用前检查 |
|---|---|---|
| DevTeam/Pure.DI | 主题用途：将 DevTeam/Pure.DI 纳入「依赖注入与 Composition Root」候选路线，根据 avalonia · composition · csharp · C# 核对功能、平台与版本适配。 上游自述（保留原文）：Pure DI for .NET | 未归档源项目 · ★ 822 · MIT · 2026-07-19。边界命中：先读 README，确认它确实属于当前任务，再决定是否使用。 |
| framna-dk/CoffeeShopsExample | 主题用途：将 framna-dk/CoffeeShopsExample 纳入「依赖注入与 Composition Root」候选路线，根据 Swift 核对功能、平台与版本适配。 上游自述（保留原文）：Example project showing how Dependency Injection along with the Composition Root pattern can be introduced in a SwiftUI codebase. | 未归档源项目 · ★ 75 · 协议未声明 · 2023-10-05。活跃候选：先核对 README、最新 Release、目标版本与已知问题。 |
2. 微前端 Root Config · 3#
比较 single-spa、Angular 和多语言微前端的顶层路由、生命周期与共享依赖，先在本地验证挂载和卸载。
本组共 3 项：3 个源项目、0 个 Fork，其中 0 项已归档。新手应先从“未归档的源项目”核对 README 和 Release，再用 Fork 追溯设备适配或历史差异；分组本身不等于推荐安装。
| 项目 | 上游定位与识别信号 | 状态与采用前检查 |
|---|---|---|
| WJSoftware/vite-plugin-single-spa | 主题用途：将 WJSoftware/vite-plugin-single-spa 纳入「微前端 Root Config」候选路线，根据 microfrontend · single-spa · vite-plugin · TypeScript 核对功能、平台与版本适配。 上游自述（保留原文）：Vite plugin to convert Vite-based projects to single-spa root or micro-frontend applications. | 未归档源项目 · ★ 78 · MIT · 2026-07-10。活跃候选：先核对 README、最新 Release、目标版本与已知问题。 |
| polyglot-microfrontends/root-config | 主题用途：将 polyglot-microfrontends/root-config 纳入「微前端 Root Config」候选路线，根据 JavaScript 核对功能、平台与版本适配。 上游自述（保留原文）：The root config for polyglot microfrontends | 未归档源项目 · ★ 52 · MIT · 2025-06-19。活跃候选：先核对 README、最新 Release、目标版本与已知问题。 |
| angular-microfrontends/root-config | 主题用途：将 angular-microfrontends/root-config 纳入「微前端 Root Config」候选路线，根据 EJS 核对功能、平台与版本适配。 上游自述（保留原文）：Root config for angular.microfrontends.app | 未归档源项目 · ★ 44 · MIT · 2026-02-07。活跃候选：先核对 README、最新 Release、目标版本与已知问题。 |
3. Monorepo 与多根工作区 · 3#
用 VS Code、目录浏览器和 Obsidian 虚拟挂载说明多个项目根的发现、去重、权限和符号链接边界。
本组共 3 项：3 个源项目、0 个 Fork，其中 0 项已归档。新手应先从“未归档的源项目”核对 README 和 Release，再用 Fork 追溯设备适配或历史差异；分组本身不等于推荐安装。
| 项目 | 上游定位与识别信号 | 状态与采用前检查 |
|---|---|---|
| tescolopio/Obsidian_FolderBridge | 主题用途：将 tescolopio/Obsidian_FolderBridge 纳入「Monorepo 与多根工作区」候选路线，根据 TypeScript 核对功能、平台与版本适配。 上游自述（保留原文）：adds external folders to your Obsidian vault as seamless, native‑feeling directories. It creates virtual mount points that map real filesystem paths into the vault, enabling multi‑root workspaces without moving or duplicating files. | 未归档源项目 · ★ 169 · MIT · 2026-06-18。活跃候选：先核对 README、最新 Release、目标版本与已知问题。 |
| folke/vscode-monorepo-workspace | 主题用途：将 folke/vscode-monorepo-workspace 纳入「Monorepo 与多根工作区」候选路线，根据 lerna · monorepo · pnpm · TypeScript 核对功能、平台与版本适配。 上游自述（保留原文）：📦✨Manage monorepos with multi-root workspaces. Supports Lerna, Yarn, Pnpm, Rushjs and recursive package directories. | 未归档源项目 · ★ 164 · Apache-2.0 · 2026-07-17。活跃候选：先核对 README、最新 Release、目标版本与已知问题。 |
| k1LoW/roots | 主题用途：将 k1LoW/roots 纳入「Monorepo 与多根工作区」候选路线，根据 monorepo · Go 核对功能、平台与版本适配。 上游自述（保留原文）：'roots' is a tool for exploring multiple root directories, such as those in a monorepo project. | 未归档源项目 · ★ 44 · MIT · 2026-07-19。活跃候选：先核对 README、最新 Release、目标版本与已知问题。 |
4. 聚合仓库与工作区根 · 3#
解释 root repository/root workspace 如何聚合子项目、版本与构建工具；它描述工程结构，不代表系统权限。
本组共 3 项：3 个源项目、0 个 Fork，其中 0 项已归档。新手应先从“未归档的源项目”核对 README 和 Release，再用 Fork 追溯设备适配或历史差异；分组本身不等于推荐安装。
| 项目 | 上游定位与识别信号 | 状态与采用前检查 |
|---|---|---|
| tinycld/workspace | 主题用途：将 tinycld/workspace 纳入「聚合仓库与工作区根」候选路线，根据 仓库名、README 与发布记录 核对功能、平台与版本适配。 上游自述（保留原文）：TinyCld npm-workspace root (members cloned via @tinycld/bootstrap --tooling) | 未归档源项目 · ★ 71 · 协议未声明 · 2026-07-12。活跃候选：先核对 README、最新 Release、目标版本与已知问题。 |
| couchbase/couchbase-lite-java-ce-root | 主题用途：将 couchbase/couchbase-lite-java-ce-root 纳入「聚合仓库与工作区根」候选路线，根据 Shell 核对功能、平台与版本适配。 上游自述（保留原文）：The root workspace for the Community Editions of the Java language family of products (Java Desktop, Java WebService, and Android) | 未归档源项目 · ★ 58 · NOASSERTION · 2026-07-01。活跃候选：先核对 README、最新 Release、目标版本与已知问题。 |
| SpectralSequences/sseq | 主题用途：将 SpectralSequences/sseq 纳入「聚合仓库与工作区根」候选路线，根据 Rust 核对功能、平台与版本适配。 上游自述（保留原文）：The root repository for the SpectralSequences project. | 未归档源项目 · ★ 34 · Apache-2.0 · 2026-07-16。边界命中：先读 README，确认它确实属于当前任务，再决定是否使用。 |
5. Android 安全与 DeFi 跨界库 · 2#
对 Root/VPN/模拟器拦截和 Solidity 核心库分别说明安全信号与合约风险，并指向更合适的专题，不混入框架操作步骤。
本组共 2 项：2 个源项目、0 个 Fork，其中 0 项已归档。新手应先从“未归档的源项目”核对 README 和 Release，再用 Fork 追溯设备适配或历史差异；分组本身不等于推荐安装。
| 项目 | 上游定位与识别信号 | 状态与采用前检查 |
|---|---|---|
| equilibria-xyz/root | 主题用途：将 equilibria-xyz/root 纳入「Android 安全与 DeFi 跨界库」候选路线，根据 Solidity 核对功能、平台与版本适配。 上游自述（保留原文）：Core library for DeFi. | 未归档源项目 · ★ 30 · Apache-2.0 · 2026-04-08。活跃候选：先核对 README、最新 Release、目标版本与已知问题。 |
| ahuamana/SecurityApps | 主题用途：将 ahuamana/SecurityApps 纳入「Android 安全与 DeFi 跨界库」候选路线，根据 Kotlin 核对功能、平台与版本适配。 上游自述（保留原文）：🔒 Advanced Android Security Techniques: Root, VPN, Proxy, Emulator Blocking. Strengthen your app's defenses with our comprehensive security features. Protect against vulnerabilities and safeguard user data. Explore our repository for source code and documentation. | 未归档源项目 · ★ 12 · 协议未声明 · 2025-09-03。边界命中：先读 README，确认它确实属于当前任务，再决定是否使用。 |
开始前#
需要受支持的 Node.js/npm。新建空目录 <lab-dir>，确认 npm config get registry 是组织批准的 registry，运行 npm init -y，再检查将要安装的包名是 react、react-dom、vue、vite。不要在陌生仓库直接 npm install；本例是你自己创建的四个依赖。若组织要求 lockfile/hash 审核，应先遵守该策略。
操作步骤#
1. 安装局部依赖并创建两个容器#
在 <lab-dir> 运行 npm install react react-dom vue vite，确认生成的 package-lock.json 和 node_modules 都在实验目录。用编辑器创建 index.html：
<!doctype html><meta charset="UTF-8">
<div id="react-root"></div>
<div id="vue-root"></div>
<script type="module" src="/src/main.jsx"></script>这两个 div 是普通 DOM nodes；尚未执行 JS 时它们是空的。
2. 分别挂载 React 与 Vue#
创建 src/main.jsx：
import React from 'react';
import { createRoot } from 'react-dom/client';
import { createApp, h } from 'vue';
const reactContainer = document.getElementById('react-root');
createRoot(reactContainer).render(<section>React child tree</section>);
createApp({ render: () => h('section', 'Vue child tree') }).mount('#vue-root');运行 npm exec -- vite --host 127.0.0.1，只打开终端输出的 loopback URL。不要加 --host 0.0.0.0。
3. 用 DOM 证据定位挂载边界#
打开 DevTools Elements，确认两个 container 下各出现一个 section。在 Console 求值 document.getElementById('react-root') instanceof HTMLElement 和 document.querySelector('#vue-root') instanceof HTMLElement，两者应为 true。再求值一个不存在的 document.getElementById('missing-root')，应为 null；这就是把错误 ID 传给 createRoot/mount 会失败的根本原因，无需修改系统权限。
4. 停止、回滚并连接架构术语#
在 Vite 终端按 Ctrl-C，刷新确认端口停止。用图表记录：DOM container 是浏览器节点；React root/Vue app 管自己的子树；single-spa root config 决定何时 mount/unmount 多个应用；Composition Root 装配依赖。确认 <lab-dir> 只含本实验后，用文件管理器删除整个目录，局部 node_modules 和 lockfile 一并回滚。
验证#
- 页面同时显示 React child tree 与 Vue child tree。
- Elements 面板能指出两个 container 与各自 child 的父子关系。
- 两个正确 selector 返回 HTMLElement，故意缺失的 selector 返回 null。
- 开发服务只监听 loopback，并能通过
Ctrl-C停止。 - 删除实验目录后没有全局包、sudo 文件或 Android 设备变化。
排错#
| 现象 | 常见原因 | 安全处理 |
|---|---|---|
| React 报 target/container 不是 DOM element | ID 拼错或脚本早于元素执行 | 比较 HTML ID 与 selector，并在 DevTools 检查 null |
| Vue mount 警告找不到元素 | #vue-root 不存在或被改名 | 恢复匹配 selector，不增加系统权限 |
| JSX 无法解析 | 文件扩展名不是 .jsx 或 Vite 未运行 | 核对路径/扩展名和本地 Vite，不装随机转换插件 |
| npm 出现权限错误 | 目录曾由 sudo/npm root 创建 | 换到自己拥有的新实验目录，不运行 sudo npm |
| 想把 token 放 root config 共享 | 混淆编排与秘密管理 | secret 留在服务端，前端只使用最小短期凭据 |
完成清单#
- 我能区分 DOM container、React root、Vue app 和 root config。
- 我只在空实验目录安装四个核对过的依赖。
- 我用 DOM null/HTMLElement 证据定位挂载问题。
- 我没有使用 sudo、公开监听或把 secret 放进前端。
- 我停止 Vite 并删除完整实验目录。