知识管理知识库【免费下载链接】dendronThe personal knowledge management (PKM) tool that grows as you do!项目地址https://gitcode.com/gh_mirrors/de/dendron点击查看免费下载Dendron 是面向个人知识管理PKM的开源工具其前端生态由多个 npm 包构成。dendron-design-system是其中负责统一视觉规范与共享 UI 组件的基础包它基于 TSDX 脚手架搭建内置 Chakra UI 主题字体、品牌色与 Logo 组件并通过 Storybook、Example Playground 与 size-limit 建立了一套开发—预览—体积管控—发布的完整工作流。阅读本文后你将掌握该设计系统的目录结构、字体与主题集成方式、TSDX 开发命令、组件测试与体积分析以及在 Lerna 单仓中运行 Example 与发布到 Netlify 的完整实操方案。设计系统概览包结构与工程定位dendron-design-system位于 packages/dendron-design-system是一个以 React 为基础、通过 TSDX 可以确认它的工程定位包名与产物name为dendron-design-systemmain指向dist/index.jsCJS 产物module指向dist/dendron-design-system.esm.jsESM 产物typings指向dist/index.d.ts发布时仅打包dist与src两个目录运行时依赖chakra-ui/react组件与主题体系、emotion/react/emotion/styled样式引擎、fontsource/montserrat与fontsource/roboto自托管字体、framer-motion动画对宿主的要求peerDependencies声明react 16即宿主项目只需保证 React 版本不低于 16 即可引入本设计系统。目录结构分为五大部分src/组件与主题源码、example/Parcel 驱动的示例 Playground、stories/Storybook 故事、test/单元测试与public/静态资源如 dendron-vector.svg Logo 矢量图。字体策略Montserrat Roboto 双字体方案设计系统在字体上采用了明确的标题/正文双字体搭配Montserrat作为标题字体header fontRoboto作为正文字体body font。之所以选择 Montserrat是因为它已在当时的 dendron.so 官网上投入使用属于延续既有品牌视觉Roboto 则来自 Google Fonts 的推荐搭配用于保证正文的长文可读性。通过 Fontsource 自托管而非 CDN 加载按 README 的说明字体引入方式采用了 Chakra UI 官方指南中推荐的Fontsource 方案自托管字体包。与依赖 Google Fonts CDN 不同Fontsource 将字体文件打包进 npm 依赖随设计系统一起分发宿主项目无需联网请求外部字体服务加载更稳定、隐私更友好。在 package.json 中可以看到两个字体依赖fontsource/montserrat: ^4.2.2, fontsource/roboto: ^4.2.2宿主项目只需两行 import字体将随设计系统一起被打包分发宿主项目唯一需要做的是在应用最底层引入字体样式import fontsource/montserrat; import fontsource/roboto;对于 Next.js 项目这个位置就是_app.tsx应用入口组件。README 注明该导入方式已在本仓库的preview.tsx中完成过。需要注意这只是一种接入约定——字体样式导入必须发生在任何组件渲染之前因此 README 特别强调at the lowest app level。主题层字体与品牌色如何注入 Chakra UI字体导入解决的是字体文件可用的问题而哪些场景用哪种字体则由主题配置决定。看 src/theme/fonts.tsexport const fonts { heading: montserrat, body: roboto, };heading对应标题类组件如Headingbody对应正文类组件如Text两者恰好与 README 中的设计决策一一对应。与之配套的是品牌色板 src/theme/colors.tsexport const colors { brand: { lightGreen: #43B02A, darkGreen: #154734, neutralBlack: #232222, }, };lightGreen亮绿与darkGreen深绿构成品牌主色系neutralBlack作为中性色基准。最终在 src/theme/index.ts 中通过 Chakra UI 的extendTheme合并为完整的主题对象并导出import { extendTheme } from chakra-ui/react; import { colors } from ./colors; import { fonts } from ./fonts; export const theme extendTheme({ colors, fonts, });extendTheme是 Chakra UI 提供的主题扩展入口它会在保留 Chakra 默认设计令牌的基础上用本设计系统自定义的colors与fonts覆盖同名令牌。宿主项目引入该主题后所有 Chakra 组件的字体与配色即自动对齐品牌规范。开发工作流TSDX 构建 Storybook Example Playground本设计系统基于 TSDX 搭建TSDX 会在/src下初始化库代码并在/example下创建基于 Parcel 的 Playground 演示应用。从 package.json 的scripts可以看到完整命令映射start: tsdx watch, build: tsdx build, test: tsdx test --passWithNoTests, lint: tsdx lint, storybook: start-storybook -s ./public -p 6006, build-storybook: build-storybook -s ./public, size: size-limit, analyze: size-limit --why推荐的开发三终端工作流README 给出的推荐流程是同时开三个终端终端一启动 TSDX 监听构建npm start # 或 yarn start对应tsdx watch编译输出到/dist并以监听模式运行——每次保存src下的改动都会自动重建到/dist。这是整个工作流的核心因为下游的 Storybook 与 Example 都消费/dist产物。终端二运行 Storybookyarn storybook加载./stories目录下的故事文件启动时通过-s ./public指定静态资源目录Logo 组件依赖其中的 dendron-vector.svg。注意README 特别强调Stories 中引用组件时应像使用库一样从项目根目录导入例如import { Logo } from ../src/components这个根目录别名已在 tsconfig 与 Storybook 的 webpack 配置中预先配置。终端三启动 Example Playgroundcd example npm i # 或 yarn 安装依赖 npm start # 或 yarn startExample 是 example/package.json 定义的 Parcel 应用parcel index.html。它默认导入并热重载/dist中的产物因此如果看到组件没有更新请先确认终端一中的 TSDX 是否在监听模式运行。全程无需 symlink——组件复用依赖 Parcel 的模块别名alias机制而非软链接。Example 的入口 example/index.tsx 展示了最小用法import react-app-polyfill/ie11; import * as React from react; import * as ReactDOM from react-dom; import { Logo } from ../src/components/Logo; const App () ( div Logo / /div ); ReactDOM.render(App /, document.getElementById(root));一次性构建与测试一次性构建npm run build或yarn build对应tsdx build运行测试npm test或yarn test对应tsdx test --passWithNoTests即无测试时也不会因退出码失败而中断。组件示例Logo 与 Storybook 交互式调试以仓库中唯一的核心组件Logo为例它的实现位于 src/components/Logo/index.tsximport { ImgProps } from chakra-ui/image; import { chakra } from chakra-ui/system; import * as React from react; export const Logo: React.FCImgProps ({ boxSize, ...rest }) ( chakra.img src{/dendron-vector.svg} boxSize{boxSize} {...rest} / );Logo是一个泛型组件直接透传 Chakra UI 图片组件的全部属性ImgProps并暴露boxSize控制尺寸默认渲染public/dendron-vector.svg。它从 src/components/index.ts 统一导出export { Logo } from ./Logo;对应地在 stories/Logo.stories.tsx 中Storybook 为它配置了交互式控制项方便在设计阶段直观调节尺寸argTypes: { boxSize: { control: { type: range, min: 8, max: 80, step: 8 }, }, },而 test/logo.test.tsx 提供了一个渲染不崩溃的最小冒烟测试验证组件可被挂载与卸载it(renders without crashing, () { const div document.createElement(div); ReactDOM.render(Logo /, div); ReactDOM.unmountComponentAtNode(div); });工程配置解析代码质量、体积与类型README 的 Configuration 一节覆盖了工程质量相关的四项配置均可对照仓库实际文件逐一验证。代码质量Prettier Husky lint-staged代码质量由prettier、husky、lint-staged兜底。本仓库中 Husky 钩子配置为提交前执行tsdx lint见 package.json 的husky.hooks.pre-commitPrettier 则采用printWidth: 80、semi: true、singleQuote: true、trailingComma: es5的规范。各宿主项目可按需调整package.json中对应字段。Jest 测试Jest 已预先配置好执行npm test或yarn test即可运行 test 目录下的测试。体积分析size-limitsize-limit用于计算库的真实体积成本npm run size # 输出各产物实际体积与预算对比 npm run analyze # size-limit --why可视化各依赖的体积构成体积预算在 package.json 的size-limit字段中声明两个产物分别限定在10 KB以内size-limit: [ { path: dist/dendron-design-system.cjs.production.min.js, limit: 10 KB }, { path: dist/dendron-design-system.esm.js, limit: 10 KB } ]这对于组件库至关重要——体积直接决定宿主应用的首屏加载成本超限会直接让 CI 失败。目录骨架Setup FilesTSDX 初始化时生成的标准结构如下其中标注EDIT THIS的文件是需要开发者修改的/example index.html index.tsx # test your component here in a demo app package.json tsconfig.json /src index.tsx # EDIT THIS /test blah.test.tsx # EDIT THIS /stories Thing.stories.tsx # EDIT THIS /.storybook main.js preview.js .gitignore package.json README.md # EDIT THIS tsconfig.json打包器RollupTSDX 底层使用 Rollup 作为打包器为不同模块格式与构建场景生成多份 Rollup 配置。本仓库还通过 tsdx.config.js 向 Rollup 管线注入了图片插件import image from rollup/plugin-image; module.exports { rollup(config) { config.plugins.push(image()); return config; }, };该插件允许在源码中直接import图片资源并内联为 base64 或独立文件是组件库处理 SVG/PNG 等静态资源的标配能力。TypeScript 严格模式tsconfig.json 配置了dom、esnext类型环境与react的 JSX 转换并开启strict、noImplicitReturns、noUnusedLocals、noUnusedParameters等严格检查declaration: true与sourceMap: true保证消费者获得.d.ts声明与源码映射moduleResolution: nodeesModuleInterop则保证 ESM/CJS 互操作与 Node 式模块解析。宿主项目可按自身需求调整。部署 Example Playground 到 NetlifyExample 只是一个简单的 Parcel 应用可以像部署任何静态站点一样部署到任意平台。README 给出了使用 Netlify CLI 的手动部署流程npm i -g netlify-cli # 先安装 Netlify CLI cd example # 若尚未进入 example 目录 npm run build # 构建到 dist netlify deploy # 部署 dist 目录若已将 git 仓库接入 Netlify也可以配置持续部署CDnetlify init # build command: yarn build cd example yarn yarn build # directory to deploy: example/dist # pick yes for netlify.toml即先构建设计系统本身yarn build再进入example安装依赖并构建 Playground最终部署example/dist目录。Lerna 单仓中的依赖解析问题与修复当在 Lerna 管理的 monorepo 中新建 TSDX 包时运行example项目可能会遇到Cannot resolve dependency错误。README 指出了根因Lerna 项目依赖安装方式特殊example 项目package.json中的alias 可能指向错误位置——这些依赖实际安装在了 Lerna 项目的根node_modules而非 example 本地。修复方法是调整 example 内部package.json的alias指向实际安装位置实际路径取决于 Lerna 目录结构alias: { - react: ../node_modules/react, - react-dom: ../node_modules/react-dom react: ../../../node_modules/react, react-dom: ../../../node_modules/react-dom },对照本仓库 example/package.json其 alias 正是这个模式alias: { react: ../node_modules/react, react-dom: ../node_modules/react-dom/profiling, scheduler/tracing: ../node_modules/scheduler/tracing-profiling }另一种替代方案是彻底移除 alias把被 alias 的依赖改为 devDependencies 直接声明——但这种方式可能引入其他问题README 对此给出了警示。实际采用哪种方式取决于组件库对 React 版本的复用要求与 monorepo 的目录深度。小结dendron-design-system是一份结构清晰、工程化完备的组件库样例字体通过 Fontsource 自托管并由 Chakra UI 主题统一注入开发期借助 TSDX 监听构建串联 Storybook 与 Parcel Playground发布前用 size-limit 把两个产物控制在 10 KB 预算内并给出了 Netlify 部署与 Lerna 单仓踩坑的完整解法。无论是要为 Dendron 生态贡献组件还是在自己的项目中搭建类似的 React 组件库上述配置与工作流都可以直接复用。后续需要扩展组件时只需在 src/components 新增组件、在 stories 补充 Story、并在 test 添加测试即可无缝接入整套既有流程。赞分享知识管理知识库【免费下载链接】dendronThe personal knowledge management (PKM) tool that grows as you do!项目地址https://gitcode.com/gh_mirrors/de/dendron点击查看免费下载相关推荐Carbon Design System 开发者手册Monorepo 架构、Sass 包体系与发布维护实战指南Carbon Design System 开发者手册Monorepo 架构、Sass 包体系与发布维护实战指南 导读 本文完整解读 IBM Carbon D前端UI组件设计系统OpenCore Legacy Patcher终极指南5步让旧Mac焕然一新安装最新macOS系统OpenCore Legacy Patcher终极指南5步让旧Mac焕然一新安装最新macOS系统 你是否有一台性能依然强劲的旧Mac却被苹果官方限制无法升操作系统固件驱动开发WordPress Design System MCP Server 实战与演进全解析基于 Gutenberg 的设计系统智能体接口WordPress Design System MCP Server 实战与演进全解析基于 Gutenberg 的设计系统智能体接口 WordPress De后端前端上一篇CodeLlama模型量化终极指南INT4/INT8压缩技术实践与性能对比下一篇在 Docker 中以 Library 模式运行 PostGraphile V5构建 Node.js 驱动的 GraphQL 容器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考