如何为主项目下的内部子项目配置独立sub package.json并实现多场景运行

你描述的「子项目保留独立仓库、可单独运行，同时可作为组件嵌入主项目」的诉求，是个人作品集类项目的典型场景，以下是可直接落地的操作方案：

子项目侧配置（无需改动原有仓库逻辑） #

• 每个子项目保留原有完整仓库结构，根目录自带独立package.json，原有的dev、build等命令完全保留，确保单独克隆子项目仓库时可正常安装依赖、运行、打包。
• 新增一个统一导出入口（如src/main.export.js，根据自身技术栈调整），将子项目的根组件、路由配置等需要暴露给主项目的内容统一导出，不需要修改原有业务代码。
• 如果子项目是完整单页应用，可额外导出路由前缀配置，主项目嵌入时直接挂载到对应路由节点即可。

主项目侧引入配置 #

• 在主项目根目录新建sub-projects文件夹专门存放子项目，通过git submodule add <子项目仓库地址> sub-projects/[子项目标识]命令将所有子项目作为Git子模块引入主项目。主项目仓库只会存储子项目对应commit的引用，不会存储子项目源码，完全保留子项目的独立仓库属性。
• 依赖冲突可根据项目情况选择两种处理方案：
  • 依赖兼容场景：在主项目的构建工具（Vite/Webpack）中配置include规则，将子项目源码纳入主项目构建流程，缺失的依赖直接在主项目安装即可。
  • 依赖冲突场景：进入每个子项目目录单独执行npm install安装自身依赖，主项目直接引入子项目预构建后的产物即可，不会出现依赖版本冲突问题。
• 给主项目构建工具配置路径别名，比如@sub指向根目录的sub-projects文件夹，即可直接在主项目中通过import DemoProject from '@sub/demo/src/main.export'的方式引入子项目内容，作为普通组件嵌入主项目页面或路由体系中。

日常维护规则 #

• 子项目代码修改直接在对应子模块目录内提交、推送至子项目独立仓库即可，主项目需要更新子项目版本时，执行git submodule update --remote拉取最新commit引用即可。
• 其他人克隆主项目时，添加--recurse-submodules参数即可一次性拉取主项目+所有子项目的完整代码。

特殊场景提示：如果子项目使用的核心框架版本和主项目不兼容（如主项目用React 18、子项目用React 16），不要直接引入子项目源码，可将子项目打包为UMD产物后引入，或直接用iframe嵌入子项目的在线预览地址。

内容的提问来源于stack exchange，提问作者Darkbound