本文最大不同是每一步都会有详细commit帮助你实现代码
知识涉及
lerna
,代码构建
及dumi
文末有链接 github
基础dumi脚手架初始化项目
- 创建目录
mkdir dirName && cd dirName
- 脚手架初始化项目
yarn create @umijs/dumi-lib --site
因为dumi脚手架本身不支持lerna模式 需要我们使用lerna初始化一遍(先用lerna初始化,dumi会覆盖掉部分package.json的配置)
接入lerna
- 全局安装lerna
npm i -g lerna
- 初始化
lerna init
- 修改lerna.json
{ ... "npmClient": "yarn", "useWorkspaces": true, // 使用yarn workspaces "version": "independent" // 使用独立版本 }
- 修改package.json
{ ... "workspaces": ["packages/*"], }
基于lerna创建子包
由于yarn和lerna在功能上有较多的重叠,我们采用yarn官方推荐的做法,用yarn来处理依赖问题,用lerna来处理发布问题。能用yarn做的就用yarn做吧
Jest relies on Yarn to bootstrap the project, and on Lerna for running the publish command(s).
- 删除根目录src(dumi脚手架创建的demo)
- 创建子包(社区优秀实践@项目名/子包名,方便npm上管理)
// 可以全部点回车,后面修改 lerna create @cubee/components lerna craete @cubee/utils
完善子包代码及文档
- 添加子包间依赖,@cube/components依赖@cube/utils
// 必须添加版本号 不然会报错(lerna添加不会) yarn workspace @cubee/components add @cubee/utils@1.0.0
- 编写组件代码、demo代码及文档
这时候执行
yarn
yarn start
应该能看见文档网站能正常运行了
建议阅读 dumi文档(包括文档路由、demo中引用组件等) 虽然代码能正常工作,但是这时候demo中ts还是会提示错误
这是因为我们还没有构建,ts从package.json配置的入口文件中找不到代码
基于father-build构建
father是dumi的打包工具,在dumi初始化项目时已经安装。 是一款基于rollup 和 babel 的组件打包工具,具体使用方式详见文档。 这里我们只基于babel打包
- 修改.fatherrc.ts
export default { esm: 'babel', pkgs: ['utils', 'components'], // 解决依赖顺序 }
- 分别修改子包package.json
{ ... "module": "es/index.js", "typings": "es/index.d.ts", "files": [ "lib", "es" ] }
- 再重新打开文件,TS将不再报错(有时候要重写引入语句,让TS重新查找目标文件)
基于lerna发布版本
恭喜你终于到最后一步了 我们将使用lerna完成发布 lerna publish指令会做两件事
- 生成changelog,改变需要发布子包version,推送代码和tag到远端仓库
- 构建代码,发布到npm 我们还需要做以下事情
- 首先将代码推到git远端仓库
- 在npm官网上需要添加组织以存放带作用域的包
- 配置lerna.json
{
...
"command": {
"publish": {
"registry": "https://registry.npmjs.org/" // 配置npm地址
},
"version": {
"conventionalCommits": true,
"message": "chore(release): publish" // 修改
}
}
}
- 分别修改子包package.json
{
...
"repository": {
"type": "git",
"url": "https://github.com/bitsu567/cubee"
},
}
- 登录npm
npm login
- 发布
lerna publish
然后就可以在你的项目中引用了! 为了不污染npm环境,测试包可以自己基于verdaccio搭建npm环境,或者尽量72小时内删除项目~
参考