React TypeScript用户福音react-bluekit如何自动解析tsx组件文档【免费下载链接】react-bluekitAutomatically generating a component library from your React components (ES5, ES6, Typescript)项目地址: https://gitcode.com/gh_mirrors/re/react-bluekit还在为手写组件文档头秃吗react-bluekit是一个 React 组件文档自动生成工具只需指向你的组件目录它就能自动扫描.js、.jsx、.tsx文件解析组件的 props 与 JSDoc 注释一键生成带可编辑 props、实时预览的组件文档库。对于 React TypeScript 用户它能自动识别 tsx 文件并解析 TS 类型标注真正做到改代码文档自动更新。为什么需要 react-bluekit 组件文档工具 每个中大型 React 项目都有几十上百个组件。传统做法是在 Wiki 或 Storybook 里手写每个组件的文档组件 props 变更后文档悄悄过期新人接手项目时只能靠读源码猜用法react-bluekit 的思路完全不同文档不是写出来的是从代码里生成出来的。它通过静态分析自动提取组件名与菜单名称propTypes 中定义的每个属性类型、默认值、是否必填JSDoc 注释作为描述文案不影响外观的属性如回调函数会自动隐藏tsx 组件如何被自动解析这是 react-bluekit 对 TypeScript 用户最友好的部分核心逻辑位于 src/createBlueKit.js自动发现递归扫描baseDir下所有.js/.jsx/.tsx文件自动跳过测试目录与排除项双解析器.tsx文件交给react-docgen-typescript解析器直接从 TypeScript 类型标注中推断 props.js/.jsx则用react-docgen解析 propTypes智能推断由 src/libraries/buildProps.js 根据类型生成默认示例值——string给文本、bool给true、number给1、enum取第一个枚举值……无需手动配置容错解析解析失败的组件会被跳过并给出黄色警告不会让整个文档构建崩溃也就是说你只要在 tsx 里写好类型或 propTypes加 JSDoc 注释文档就自动成形/** * A simple checkbox element */ export default class Checkbox extends Component { static propTypes { /** Error prop description */ error: RPT.string, label: RPT.string.isRequired, } }参考示例组件example_components/Checkbox.react.js最快上手一键安装与配置步骤 ⚡第 1 步安装npm install --save react-bluekit第 2 步扫描组件目录在package.json中添加一条脚本即可scripts: { bluekit: bluekit --baseDir ./components --paths . --exclude \./(Layout|StyledComponent).tsx\ }--baseDir指定组件根目录--exclude可排除不想要文档的文件正则写法。运行npm run bluekit后会自动生成componentsIndex.js——一份包含全部组件元数据的索引文件。第 3 步可选Gulp 集成自动监听如果项目已用 Gulp可以在 Gulpfile 中配置获得build-bluekit与watch-bluekit两个任务组件一改、文档自动重建import createBlueKit from react-bluekit/lib/createBlueKit; createBlueKit({ baseDir: ${__dirname}/src/browser, paths: [./components/, ./auth], exclude: [./components/Foo], noSpecialReplacements: true // 纯函数组件时设为 true });相关实现见 src/createBlueKit.js生成的索引文件模板在 nunjucks/componentsIndex.nunjucks。在项目中嵌入文档页只需几行代码 生成索引后把文档页挂到你的应用里完整用法可对照 example/src/App.jsimport BlueKit from react-bluekit; import componentsIndex from ../componentsIndex; BlueKit componentsIndex{componentsIndex} inline nameMyProjectName /inline内嵌显示而非全屏适合放进文档站某一页name作为 localStorage 命名空间区分不同项目打开页面后你会得到 左侧组件列表 全局搜索框️ 中间区域组件实时预览⚙️ 右侧 props 面板拖动/输入即改所见即所得 切换简单 props / 完整 props两种模式主界面由 src/app/Page.react.js 驱动props 表格、源码展示等模块在src/app/component/目录下。实用技巧与常见问题 描述来自 JSDoc给组件和每个 prop 写 JSDoc 注释文档页就会展示对应说明不用额外维护任何 markdown回调自动隐藏onChange这类不影响外观的函数 props 会自动从预览面板隐藏界面更清爽逻辑见 src/libraries/filterFunctionProps.js异常兜底组件渲染报错时不会炸掉整个文档页由 src/libraries/wrapComponentWithRescue.js 捕获并展示错误提示页面加载不出来通常是 localStorage 缓存了旧数据控制台执行localStorage.clear()即可想要完整体验cd example npm install gulp然后打开http://localhost:3000玩起来写在最后react-bluekit 把组件文档从一份需要人肉维护的资产变成了构建流程中的一个自动产物——对 React TypeScript 项目尤其友好tsx 类型即文档改完代码watch-bluekit一跑团队看到的永远是最新组件库。如果你的项目还在手写组件文档值得花十分钟试试。【免费下载链接】react-bluekitAutomatically generating a component library from your React components (ES5, ES6, Typescript)项目地址: https://gitcode.com/gh_mirrors/re/react-bluekit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考