一、初始化工程
脚手架(内置release-it，commitlint)
image.png
npx create-react-native-library react-native-zhoupu-ui
image.png
二、Dumi集成
什么是dumi
dumi，中文发音嘟米，是一款为组件开发场景而生的文档工具， dumi 负责组件开发及组件文档生成。
集成dumi、dumi-theme-mobile等库
"devDependencies": {
"dumi-theme-mobile": "1.0.10",
"core-js": "^3.8.2",
"dotenv-cli": "^4.0.0",
"umi-plugin-react-native": "^0.1.1"
"dumi": "1.1.10"
}
文件配置
image.png
配置dumi文件.umirc.ts
import { defineConfig } from 'dumi';
export default defineConfig({
title: '舟谱大金刚',
favicon: './assets/logo.jpg',
logo: './assets/logo.jpg',
outputPath: 'docs-dist',
mode: 'site',
locales:[['zh-CN', '中文']],
});
配置.gitignore文件
# umi
.umi
.umi-production
.umi-test
.env.local
配置docs文件夹
---
title: 舟谱大金刚 - 基于 dumi 和 TypeScript 实现的移动端组件库
hero:
title: 舟谱大金刚
desc: 移动端组件库
actions:
- text: 开始使用
link: /guide
features:
- title: 开箱即用
desc: 使用方式简单
- title: React 进阶必备
desc: 使用 React 函数式编程
- title: TypeScript
desc: 代码全部使用 TypeScript 开发，提供完整的组件和 API 类型定义
---
配置package.json文件
"scripts": {
"start": "dumi dev",
"docs:build": "dumi build",
}
本地预览文档
执行 start 命令
image.png
image.png
三、组件开发以及对应文档文件的编写
目录层级
image.png
文档编写
导航、分组、标题编写
image.png
image.png
实例Demo编写
image.png
API自动生成
image.png
image.png
image.png
export组件
image.png
组件调试
example工程调试
example文件夹执行yarn install
其子目录ios文件夹执行pod install
运行example工程
wml软连接调试
四、代码发布流程
流程
目前镜像文件的配置只是针对NPM，那么发布的时候也是使用NPM命令
"scripts": {
"prepare": "bob build",
"release": "dotenv release-it",
},
通过 npm run prepare 就可以生成用于发布的 .js .d.ts 文件。
通过 npm run release即可发布
得益于react-native-builder-bob框架，在执行npm run release 命令会时，我们不需要修改版本号信息，也不需要打tag,直接执行该命令即可。
image.png
发布常见问题
提示需要登录
ERROR Not authenticated with npm. Please `npm login` and try again.
该问题的出现说明NPM配置有问题，需要检查NPM配置。
Token报错
ERROR Environment variable "GITLAB_TOKEN" is required for GitHub releases.
Documentation: https://github.com/release-it/release-it#github-releases
因为我们现在要发布代码，那么我就需要这个代码仓库的读写权限，所以报这个错误的时候，我们需要去gitlab申请Personal Access Tokens。
1、登录GitLab
2、点击右上角头像选择setting
3、在左边导航列表中选择Access token
4、输入Name(随便输入)和过期时间。
5、勾选read_repository和write_repository
6、点击生成
生成token之后，在工程根目录下面创建.env,在该文件夹下面配置token
image.png
同时该.env文件不可上传，因为一旦上传到GitLab，那么GitLab会检测到，那么此token就会失效。（此代码已提交）
image.png
五、更新日志的生成
自动生成
执行npm run release会在根目录自动生成一个CHANGELOG.md文件
文档中展示更新日志
因为生成的CHANGELOG文件位于根目录下，dumi识别不到该.md，所以执行了脚本，将根目录下的CHANGELOG.md拷贝到docs/guide目录下，并且添加标题。
"scripts": {
"release": "dotenv release-it && node scripts/movelog.js",
}
image.png
六、文档打包和发布流程
打包
"scripts": {
"docs:build": "dumi build",
}
打包成功后，会在根目录下生成一个docs-dist文件夹
发布
根据每个公司的情况，自行发布。
