基于 Rollup+Babel/SWC 的 CxJS monorepo 构建与发布方案

方案简介

CxJS 仓库本身是一个面向多包发布的构建型 monorepo：通过 Yarn v4 workspaces 统一管理核心框架、React 适配层、构建工具、主题包与各类编译插件；使用 cx-build-tools（基于 Rollup）作为统一的打包工具链；并同时提供 babel-plugin- 与 swc-plugin- 两套等价插件，分别用于支持 CxJS JSX 编译和按需 import 优化，方便下游项目按既有工具链自由选择。仓库还包含由 Astro 构建的文档站 homedocs 与用于复现 bug / 验证特性的 litmus 测试环境。

亮点与能力

• Yarn v4 workspaces 多包管理
• 基于 Rollup 的统一构建工具（cx-build-tools）
• Babel 插件族：处理 CxJS JSX 与 import 优化
• 等价的 SWC 插件族，提供更快的替代编译路径
• 主题包独立构建（yarn build:themes）
• 含文档站（homedocs）与 litmus 测试环境
• 与 legacy 旧版文档/gallery/fiddle 共存，逐步淘汰

组成与分工

• Yarn 4 Workspaces：monorepo 多包依赖与脚本编排
• Rollup（cx-build-tools）：各 cx-* 包的统一打包工具
• Babel 插件族（babel-plugin-*）：CxJS JSX 编译 + 按需 import 优化
• SWC 插件族（swc-plugin-*）：上述 Babel 插件的等价 SWC 实现
• CxJS / React：被构建的源码主体（cx、cx-react）
• Astro（homedocs）：文档站构建
• TypeScript：源码与 JSX 配置

前置要求

• Node.js 环境
• Yarn v4（仓库强制使用 Yarn v4 workspaces）
• 已安装 Git 用于克隆仓库

实施步骤

1. 克隆并安装依赖

yarn install              # Install dependencies

2. 构建核心包（cx-react 与 cx）

yarn build                # Build cx-react and cx

3. 构建所有主题

yarn build:themes         # Build all themes

4. 运行测试

yarn test                 # Run tests

5. （可选）启动文档站与 litmus 测试环境

cd homedocs && yarn dev   # Documentation site
yarn litmus               # Litmus testing environment

使用与配置要点

验证构建产物可用：

• yarn build 成功生成 cx 与 cx-react 的发布产物
• yarn build:themes 生成所有 cx-theme-* 主题
• cd homedocs && yarn dev 启动由 Astro 构建的 cxjs.io 文档站
• yarn litmus 启动 litmus 测试环境，用于 bug 复现与特性开发验证

仓库目录结构参考：

packages/
  cx/                     Core framework (widgets, charts, data binding, state management)
  cx-react/               React adapter
  cx-build-tools/         Rollup-based build tooling
  cx-theme-*/             Visual themes
  babel-plugin-*/         Babel plugins for CxJS JSX and import optimization
  swc-plugin-*/           SWC equivalents of the Babel plugins
  cx-cli, create-cx-app/  CLI tools for scaffolding projects
  cx-immer/               Immer integration for immutable store updates

homedocs/                 Documentation site (cxjs.io), built with Astro
litmus/                   Testing environment for bug reproduction and feature development
legacy/                   Previous-generation docs, gallery, and fiddle apps (being phased out)

注意事项与常见问题

• legacy/ 目录为上一代文档、gallery、fiddle 应用，正处于淘汰阶段
• babel-plugin- 与 swc-plugin- 提供等价能力，下游项目可按现有工具链任选其一
• 主题包需单独通过 yarn build:themes 构建

优缺点

• ✓ Babel/SWC 双插件可选
• ✓ 统一 Rollup 构建工具链
• ✕ Yarn v4 workspaces 绑
• ✕ 仍含 legacy 历史产物

出处

本方案挖掘自开源项目 codaxy/cxjs，方案内容与实施命令均来自其 README 原文。