create-ui-lib v1.5.0
快速上手
创建组件库
终端运行以下命令,创建组件库
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
可以找基础架构部-运维组 陈浩 帮忙处理
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago