create-ui-lib

快速上手

创建组件库

终端运行以下命令，创建组件库

npx -p create-ui-lib create-library

可根据需要选择是否生成接口请求相关的文件

适配已有项目

终端切到需要改造的项目，执行以下命令

# 终端切到需要改造的项目
cd [projectName]

# 初始化项目
npx -p create-ui-lib create-library --move

请确保需要改造的项目中存在基础文件 package.json

目录结构

├── .storybook
│   ├── mocker                      # 数据mock
│   │   ├── webapi                  # mock文件目录
│   │   ├── index                   # mock数据入口文件
│   │   ├── mockServiceWorker.js    # service worker文件
│   ├── main.js                     # 控制 Storybook 服务器的行为
│   ├── middleware.js               # 接口代理
│   ├── preview.js                  # Storybook 控制渲染
├── dist                            # 构建目录
│   ├── es                          # esm构建结果
│   ├── lib                         # cjs构建结果
├── src
│   ├── components                  # 组件
│   │   ├── story-button            # 示例组件button
│   │   │   ├── demos               # 文档目录
│   │   │   │   ├── xx.stories.mdx  # 组件文档
│   │   │   │   ├── xx.stories.tsx  # 组件示例
│   │   │   │   ├── xx.test.tsx     # 组件测试用例
│   │   │   ├── button.less         # 组件样式文件
│   │   │   ├── button.tsx          # 组件编写文件
│   │   │   ├── index.ts            # 组件入口文件
│   ├── services                    # 接口请求目录
│   ├── index.ts                    # 组件库入口文件
│   ├── Introduction.stories.mdx    # 组件库文档介绍
├── .fatherrc.ts                    # father-build配置文件
├── .gitignore
├── .gitlab-ci.yml                  # 文档自动部署脚本
├── .yarnrc                         # 设置yarn镜像源
├── jest.config.js                  # jest配置文件
├── jest.setup.ts                   # jest配置文件
├── CHANGELOG.md                    # 组件库更新日志
├── package.json
├── README.md
├── tsconfig.json                   # ts配置文件

请根据需要修改 src 下的文件和内容

启动调试

yarn start:docs

# 启动mock数据
yarn mock:docs

添加组件 demo

yarn demo:add

会在 src/components 目录下生成 demo 组件目录

组件打包

yarn build:library

组件发布

组件发布前会先进行打包操作，确保发布最新代码

yarn pub

执行后，会自动将组件发布到 xnpm

组件库发布目录

npm 包包含以下文件

├── dist                            # 构建目录
│   ├── es                          # esm构建结果
│   ├── lib                         # cjs构建结果
├── package.json
├── README.md

升级 library-scripts 核心依赖

yarn upg

运行测试用例

# 运行
yarn test

# watch
yarn test:watch

环境准备

请先确认 npm 源已切换到 xnpm，才能正常安装、使用喜马拉雅私有包，推荐以下方式配置，二选一即可

npm registry（推荐）

常用的 scope 仅 @xmly、@xmc，设置后对正常的 npm 使用影响较小，推荐使用。

# set xmly scope
npm config set @xmly:registry https://registry.npmjs.org/

# set xmc scope
npm config set @xmc:registry https://registry.npmjs.org/

nrm

# add xnpm
nrm add xnpm https://registry.npmjs.org/

# use xnpm
nrm use xnpm

gitlab 仓库

为方便开发者存放代码，提供了专门的 GitLab Group

创建对应 Project 仓库

仓库创建完成后，和项目进行关联即可

文档部署

将代码 push 到 gitlab 仓库后，会自动部署文档至 gitlab 仓库对应的 pages 地址，查看路径：Seetings - Pages

如果代码没有放在专门提供的 GitLab Group中，请确保当前你的 gitlab 仓库支持 CI/CD。

开通 CI/CD

如果你的 gitlab 仓库不支持 CI/CD，可参考GitLab Pages 自动部署文档、静态网站

配置 CI/CD 的 Runners 可以找基础架构部-运维组 陈浩 帮忙处理