@2dfire--fe/component-library 中文文档教程

Question

组件库基本框架

技术栈

基于 react 根据统一设计规范抽出业务通用组件库文档站基于 react-styleguildist + webpack 最终的业务组件用 rollup 打包

业务组件开发原则

低耦合、模块化、可复用

开发组件&文档

安装依赖

npm install

调试、开发组件库启动文档服务

npm run doc

组件开发

新组件以文件夹形式统一放到 components 下，最终在 components 下的 index.js 文件中导出

利用 plop 工具快速生成组件文件夹，会根据模板文件生成以组件命名的文件夹，同时修改components 下的 index.js

npx plop <ComponentName>

文档打包

npm run build:doc

组件库打包

npm run build

发布前准备

1. 首先确保已经登录 npm 账号并且拥有发布权限
2. 生成版本号、打 tag 和生成更改日志，其他用法详情见standard-version

npm run release -- --release-as <版本号>

成功之后把 tag 推到远程

git push --follow-tags origin master

发布到 npm

如果之前没有登录过 npm 的话，需要先登录再执行发布命令。放到 npm scripts 里 pub 命令，其实就是打包和发布的组合命令，执行发布之前先打包文档部署。或者不想要部署文档就直接执行发布命令好了

npm run pub

组件库使用

1. 确保项目安装了 react react-dom
2. 直接 npm 安装使用包

tips: rollup 打包已经实现按需引入，无需引入插件