如何将Storybook作为独立npm包发布至私有registry并对应组件库版本？

核心思路是将组件库和对应版本的Storybook静态站点拆分为两个独立的npm包，保持版本号严格一致，分别发布到私有registry，这样用户可以按需单独安装，且不会增大主包体积。

步骤1：调整项目结构（推荐Monorepo模式） #

将项目改为多包结构，方便版本同步和管理：

my-components/
├── packages/
│   ├── mypackage/          # 主组件库
│   │   ├── src/
│   │   ├── package.json
│   │   └── .npmignore
│   └── mypackage-storybook/ # Storybook静态包
│       ├── .storybook/     # Storybook配置目录
│       ├── stories/        # 可复用主包的stories，用软链接或相对引用
│       ├── package.json
│       └── storybook-static/ # 构建后的静态文件
└── package.json

步骤2：主包配置（确保体积不受影响） #

在mypackage/package.json中，通过files字段或.npmignore严格控制发布内容，排除所有Storybook相关文件：

• 示例package.json片段：

  {
    "name": "mypackage",
    "version": "1.0.0",
    "files": ["dist/**/*", "README.md"], // 只包含组件构建产物和文档
    // 其他配置：入口、依赖等
  }
  

• 示例.npmignore：

  .storybook/
  stories/
  storybook-static/
  

步骤3：Storybook包配置（仅发布静态文件） #

1. 在mypackage-storybook目录下，执行storybook build生成静态站点到storybook-static目录。
2. 配置package.json，仅包含静态文件，版本与主包完全一致：

   {
     "name": "mypackage-storybook",
     "version": "1.0.0", // 和主包版本严格匹配
     "private": false, // 必须设为false才能发布
     "files": ["storybook-static/**/*"], // 只发布静态站点文件
     "scripts": {
       "build": "storybook build",
       "preview": "npx serve storybook-static" // 方便本地预览
     },
     "publishConfig": {
       "registry": "你的私有registry地址" // 指向私有仓库
     }
   }
   

   • 可通过软链接复用主包的stories目录：ln -s ../mypackage/stories ./stories，避免重复维护

步骤4：版本同步与发布 #

1. 版本同步：
   • 若使用npm workspaces，在根目录执行npm version <版本号>，会自动同步所有子包版本。
   • 手动维护时，确保两个包的version字段完全相同。
2. 分别发布：
   • 进入主包目录：cd packages/mypackage && npm publish
   • 进入Storybook包目录：cd packages/mypackage-storybook && npm publish

优化建议 #

• 在主包的package.json的description或keywords中添加mypackage-storybook，方便用户关联找到文档包。
• 借助CI/CD自动化流程：每次主包发布新版本时，自动触发Storybook构建、版本同步和发布操作，避免手动出错。
• Storybook包无需安装额外生产依赖，发布后的包仅包含静态文件，体积小、安装速度快。

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