如何通过GitHub仓库链接将Storybook+React组件导入其他项目

一、把组件部署到其他真实应用 #

1. 先准备好可复用组件库 #

• 确保你的GitHub组件仓库结构规范：
  • 用打包工具（如Rollup、Babel、tsc）将组件编译到dist或lib目录；如果不想提前打包，就在package.json里加prepare脚本，让他人安装时自动执行打包：

    "scripts": {
      "build": "rollup -c", // 替换成你实际的打包命令
      "prepare": "npm run build"
    }
    

  • 在package.json中配置正确的入口字段：main（指向CommonJS格式的编译文件）、module（ES模块入口）；用TypeScript的话，还要加types字段指向类型定义文件。

2. 在目标应用中安装组件 #

直接通过GitHub仓库地址安装，支持指定分支、标签或特定提交：

• 安装主分支组件：

  npm install github:你的GitHub用户名/组件仓库名
  

• 安装dev分支版本：

  npm install github:你的GitHub用户名/组件仓库名#dev
  

• 安装指定标签版本（如v1.0.0）：

  npm install github:你的GitHub用户名/组件仓库名#v1.0.0
  

3. 在目标应用中使用组件 #

安装完成后，直接像普通npm包一样导入使用：

import { Button, Card } from '你的组件包名称';

function HomePage() {
  return (
    <Card title="示例卡片">
      <Button label="点击触发" onClick={() => alert('操作成功')} />
    </Card>
  );
}

二、把Storybook导入到另一项目 #

方案1：在目标项目的Storybook中复用组件故事 #

如果目标项目本身也使用Storybook，直接引入组件仓库的故事文件即可：

1. 打开目标项目的.storybook/main.js，在stories数组中添加组件仓库的故事路径：

   module.exports = {
     stories: [
       '../src/**/*.stories.@(js|jsx|ts|tsx)',
       // 引用已安装组件包中的故事文件
       '../node_modules/你的组件包名称/dist/**/*.stories.@(js|jsx|ts|tsx)'
     ],
     // 其他配置保持不变
   };
   

2. 启动目标项目的Storybook（npm run storybook），就能看到组件仓库中的所有组件故事。

方案2：嵌入已部署的Storybook #

如果你的组件仓库的Storybook已经部署完成（如部署到GitHub Pages），可以在目标项目中通过iframe嵌入：

function ComponentDocs() {
  return (
    <iframe
      src="你的Storybook在线部署地址"
      style={{ width: '100%', height: 'calc(100vh - 60px)', border: 'none' }}
      title="组件文档"
    />
  );
}

方案3：集成Storybook静态文件到目标项目 #

1. 在组件仓库中执行npm run build-storybook，生成静态文件（默认输出到storybook-static目录）
2. 将该目录提交到GitHub，或在package.json的files字段中配置，把它包含到组件包中：

   "files": ["dist", "storybook-static"]
   

3. 目标项目安装组件包后，可将storybook-static目录作为静态资源托管，或通过项目路由直接访问。

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