从0到1搭建monorepo组件库(基于dumi、lerna、father-build)

本文最大不同是每一步都会有详细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指令会做两件事

1. 生产changelog，改变需要发布子包version，推送代码和tag到远端仓库
2. 构建代码，发布到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"
  },
}
复制代码

• 登录npmnpm login
• 发布 lerna publish

然后就可以在你的项目中引用了！

参考

• 现代前端工程为什么越来越离不开 Monorepo
• 基于lerna和yarn workspace的monorepo工作流
• lerna+yarn workspace+monorepo项目的最佳实践