10分钟上手react-bluekit快速搭建React组件库与实时预览环境【免费下载链接】react-bluekitAutomatically generating a component library from your React components (ES5, ES6, Typescript)项目地址: https://gitcode.com/gh_mirrors/re/react-bluekitreact-bluekitBlueKit是一款开源的 React 组件库自动生成工具只需把组件目录指给它它就能自动扫描所有 React 组件支持 ES5、ES6、TypeScript生成一个可浏览、可编辑 props、并带实时预览的组件库Playground。改一行组件代码页面立刻同步刷新——这就是搭建 React 组件预览环境的最快方式。react-bluekit 是什么组件库 Playground 二合一 传统做法里组件文档往往写在 Markdown 里和真实组件代码长期脱节。react-bluekit 的思路完全不同自动扫描静态分析你的组件源码.js/.jsx/.tsx提取 props 定义自动生成组件索引文件componentsIndex.js实时预览在预览面板中直接修改每个组件的 props立即看到渲染结果自动隐藏无效 props不影响组件外观的 props如回调函数会被自动隐藏界面更清爽源码同步组件代码变更后重新生成索引即可让组件库同步更新核心入口代码可参考 src/index.js它直接导出了BlueKit /组件组件扫描逻辑在 src/createBlueKit.js 中实现。最快安装步骤3 步启动实时预览环境 在项目根目录执行以下命令# 1. 克隆仓库 git clone https://gitcode.com/gh_mirrors/re/react-bluekit cd react-bluekit # 2. 安装主包依赖 npm install cd example npm install # 3. 启动开发服务器 npm start然后打开浏览器访问http://localhost:3000你就能看到 BlueKit 组件库界面——左侧是组件菜单中间是实时预览区右侧是 props 编辑面板。example/目录就是一个完整的示例工程其 example/gulpfile.js 展示了如何把 BlueKit 接入构建流程。核心配置详解baseDir、paths 与 exclude ⚙️react-bluekit 通过 Gulp 任务对组件做静态分析两个关键任务是build-bluekit执行一次完整扫描生成组件索引watch-bluekit监听组件文件变化自动重新构建保存代码即刷新预览示例工程中的配置非常简洁只需告诉它组件在哪里createBlueKit({ baseDir: path.join(__dirname, src), // 组件索引生成位置 gulp, paths: [../../src/app/atoms, ../../example_components], // 要扫描的组件目录 })常用配置项一览配置项作用baseDir组件根目录componentsIndex.js会生成到这里paths相对baseDir的组件目录列表可配置多个exclude需要排除的文件或目录noSpecialReplacements提供简单函数式组件如export default function MyComponent() {}时设为true也可以不写 Gulp 文件直接用 npm script 调用命令行工具bluekit: bluekit --baseDir ./components --paths .接入 React 项目一个组件搞定实时预览 组件库生成后只需在你的 React 页面中引入BlueKit /组件即可参考示例 example/src/App.jsimport BlueKit from react-bluekit; import componentsIndex from ../componentsIndex; export default function PageWithBlueKit() { return ( BlueKit componentsIndex{componentsIndex} inline // 内嵌展示非整页 nameMyProjectName // 本地存储命名空间 / ); }几个实用属性componentsIndex必需上一步自动生成的组件索引inline可选设为true时组件库内嵌显示适合嵌入已有页面name可选作为 localStorage 命名空间多项目共存时建议设置还可以传入children显示在搜索框上方例如放主题切换器进阶玩法JSDoc 描述与 TypeScript 支持 ✍️为 props 加描述在组件的propTypes旁写 JSDoc 注释说明就会显示在组件库的属性表格中。示例见 example_components/Checkbox.react.jsstatic propTypes { /** * Error prop description */ error: RPT.string, label: RPT.string.isRequired, }TypeScript 支持BlueKit 会自动识别.tsx文件并切换为 react-docgen-typescript 解析器提取 props 类型无需额外配置。常见问题与调试技巧 组件库加载异常或出现奇怪报错试试在浏览器控制台清空本地存储localStorage.clear();组件没出现在列表里检查该文件是否为.js/.jsx/.tsx后缀是否被exclude规则命中或位于__test__目录测试文件会被自动忽略。改了组件代码预览没更新watch-bluekit任务需处于运行状态将default任务编排为[build-bluekit, server, watch-bluekit]即可实现启动即监听。生产构建也要生成索引把build-bluekit加进构建流程并排在 webpack 之前执行例如gulp.task(build, [build-bluekit, build-webpack])。10 分钟回顾 步骤你做了什么① 克隆并安装git clone→npm install→ 进入example再安装② 启动预览npm start打开http://localhost:3000③ 配置扫描用createBlueKit指定baseDir和paths④ 接入页面引入BlueKit componentsIndex{componentsIndex} /⑤ 持续开发watch-bluekit监听改动保存即刷新从写第一个组件到拥有可交互的组件库预览环境react-bluekit 只需要这几步。如果你正在维护 React 组件库或想给设计、产品同事一个能动手玩的组件文档这款自动生成的实时预览工具值得立刻试用。【免费下载链接】react-bluekitAutomatically generating a component library from your React components (ES5, ES6, Typescript)项目地址: https://gitcode.com/gh_mirrors/re/react-bluekit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考