如何将多组React应用按需集成到Jekyll构建的静态HTML网站中

完全可以在同一个Jekyll静态站点的不同HTML页面嵌入多个独立的小型React应用，每个应用仅在指定页面加载，互不干扰，完全符合你的部署规则需求。

开发阶段目录存放建议 #

建议在Jekyll项目根目录下新建react-apps文件夹统一存放所有独立React子应用，不要和Jekyll原生的_posts、_includes等核心目录混放，参考结构如下：

Jekyll项目根目录/
├── _includes/          # Jekyll模板片段目录
├── _layouts/           # Jekyll布局目录
├── _posts/             # 博客文章目录
├── react-apps/         # 所有React子应用源码统一存放目录
│   ├── checkoutFormApp/ # 结账表单应用源码
│   ├── memberAccess/   # 会员入口应用源码
│   └── xxxApp/         # 后续新增的其他React应用
├── assets/
│   └── react-build/    # 所有React应用构建后的产物统一存放目录
│       ├── checkoutFormApp/
│       └── memberAccess/
├── members/
│   └── index.html
├── myWonderfulProduct.html
├── myWonderfulProduct2.html
└── index.html

这种结构的优势是所有React源码集中管理，不会污染Jekyll的静态资源目录，构建后的产物统一存放也方便页面引用。

子应用构建配置调整 #

每个React子应用需要做少量配置调整，避免互相冲突、保证资源路径正确：

• 给每个应用设置唯一的挂载DOM ID，例如checkoutFormApp用#checkout-form-root，memberAccess用#member-access-root，避免不同应用挂载冲突
• 修改打包输出路径，把每个应用的构建产物输出到Jekyll根目录的assets/react-build/[对应应用名]/路径下
• 如果你用create-react-app创建应用，可以在应用的package.json中添加配置项"homepage": "/assets/react-build/[对应应用名]"，自动处理打包后的资源引用路径

页面嵌入与部署规则实现 #

按需嵌入应用 #

你只需要在指定页面插入对应应用的挂载节点和资源引用即可，不需要加载应用的页面完全不用加相关代码，天然满足排除规则：

• 要给myWonderfulProduct.html、myWonderfulProduct2.html添加checkoutFormApp，直接在这两个页面的对应位置插入代码：

<!-- 页面原有内容 -->
<div id="checkout-form-root"></div>
<link rel="stylesheet" href="/assets/react-build/checkoutFormApp/css/main.css">
<script src="/assets/react-build/checkoutFormApp/js/main.js"></script>

• 要给members/index.html添加memberAccess，直接在该页面插入对应代码：

<!-- 页面原有内容 -->
<div id="member-access-root"></div>
<link rel="stylesheet" href="/assets/react-build/memberAccess/css/main.css">
<script src="/assets/react-build/memberAccess/js/main.js"></script>

• index.html、/blog/*路径下的所有页面不插入上述代码，自然不会加载对应应用，无需额外做排除逻辑。

如果多个页面需要引入同一个应用，也可以把应用的挂载和引用代码封装成Jekyll的_includes片段，需要的页面直接引入片段即可，不用重复编写代码。

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