一蜘矢、初始化工程
腳手架(內(nèi)置release-it芭梯，commitlint)
image.png
npx create-react-native-library react-native-zhoupu-ui
image.png
二、Dumi集成
什么是dumi
dumi，中文發(fā)音嘟米烘绽，是一款為組件開發(fā)場景而生的文檔工具穴翩， dumi 負責組件開發(fā)及組件文檔生成。
集成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 實現(xiàn)的移動端組件庫
hero:
title: 舟譜大金剛
desc: 移動端組件庫
actions:
- text: 開始使用
link: /guide
features:
- title: 開箱即用
desc: 使用方式簡單
- title: React 進階必備
desc: 使用 React 函數(shù)式編程
- title: TypeScript
desc: 代碼全部使用 TypeScript 開發(fā)假哎，提供完整的組件和 API 類型定義
---
配置package.json文件
"scripts": {
"start": "dumi dev",
"docs:build": "dumi build",
}
本地預覽文檔
執(zhí)行 start 命令
image.png
image.png
三瞬捕、組件開發(fā)以及對應文檔文件的編寫
目錄層級
image.png
文檔編寫
導航、分組舵抹、標題編寫
image.png
image.png
實例Demo編寫
image.png
API自動生成
image.png
image.png
image.png
export組件
image.png
組件調(diào)試
example工程調(diào)試
example文件夾執(zhí)行yarn install
其子目錄ios文件夾執(zhí)行pod install
運行example工程
wml軟連接調(diào)試
四肪虎、代碼發(fā)布流程
流程
目前鏡像文件的配置只是針對NPM，那么發(fā)布的時候也是使用NPM命令
"scripts": {
"prepare": "bob build",
"release": "dotenv release-it",
},
通過 npm run prepare 就可以生成用于發(fā)布的 .js .d.ts 文件惧蛹。
通過 npm run release即可發(fā)布
得益于react-native-builder-bob框架扇救，在執(zhí)行npm run release 命令會時，我們不需要修改版本號信息香嗓，也不需要打tag,直接執(zhí)行該命令即可迅腔。
image.png
發(fā)布常見問題
提示需要登錄
ERROR Not authenticated with npm. Please `npm login` and try again.
該問題的出現(xiàn)說明NPM配置有問題，需要檢查NPM配置靠娱。
Token報錯
ERROR Environment variable "GITLAB_TOKEN" is required for GitHub releases.
Documentation: https://github.com/release-it/release-it#github-releases
因為我們現(xiàn)在要發(fā)布代碼沧烈，那么我就需要這個代碼倉庫的讀寫權限，所以報這個錯誤的時候像云，我們需要去gitlab申請Personal Access Tokens锌雀。
1、登錄GitLab
2迅诬、點擊右上角頭像選擇setting
3腋逆、在左邊導航列表中選擇Access token
4、輸入Name(隨便輸入)和過期時間侈贷。
5惩歉、勾選read_repository和write_repository
6、點擊生成
生成token之后俏蛮，在工程根目錄下面創(chuàng)建.env,在該文件夾下面配置token
image.png
同時該.env文件不可上傳撑蚌，因為一旦上傳到GitLab，那么GitLab會檢測到嫁蛇，那么此token就會失效锨并。（此代碼已提交）
image.png
五、更新日志的生成
自動生成
執(zhí)行npm run release會在根目錄自動生成一個CHANGELOG.md文件
文檔中展示更新日志
因為生成的CHANGELOG文件位于根目錄下睬棚，dumi識別不到該.md第煮，所以執(zhí)行了腳本，將根目錄下的CHANGELOG.md拷貝到docs/guide目錄下抑党，并且添加標題包警。
"scripts": {
"release": "dotenv release-it && node scripts/movelog.js",
}
image.png
六、文檔打包和發(fā)布流程
打包
"scripts": {
"docs:build": "dumi build",
}
打包成功后底靠，會在根目錄下生成一個docs-dist文件夾
發(fā)布
根據(jù)每個公司的情況害晦，自行發(fā)布。
