从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi

这篇具有很好参考价值的文章主要介绍了从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

当你想要搭建一个Monorepo时,相信你已经调研过很多技术选型,之前我也使用过yarn+workspace+lerna+dumi开发过一套组件库,后续有时间把这套工具也抽一个模版。

因为pnpm本身支持workspace并且lerna已经停止维护,因此决定使用新的工具从新搭建一套Monorepo模版,那么这套工具就是:

  • pnpm—包管理器
  • turborepo—外壳
  • changesets—版本号管理、changelog管理
  • dumi—文档预览
  • 其他的规范代码的工具如:—commitizeneslintlint-stagedcommitlinthusky

你可能对Turborepo不太了解,他的官方解释是高性能的JavaScript和TypeScript代码库构建系统,他在这只是作为一个壳子用来提升开发及打包效率,不用了解太多。

开始

一、使用turborepo初始化项目

  1. pnpm dlx create-turbo@latest
  2. 选择目录(项目名)、选择包管理器
    从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript
  3. 项目初始化完成,具体的目录结构什么意思可以去Turborepo看一下,不看也没关系,因为后续我们要调整它。
    从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript

我现在这里的turbo的version是1.10.12,如果你很晚看见这篇文章,可能版本有了很大不同。

  1. 链接gitHub仓库,当然这一步不是必须的,链接它的目的只是为了测试规范代码的工具是否生效。
    git remote add origin https://github.com/Atw-Lee/monorepo-template.git

不要划走:Monorepo可以用来管理多应用工程(app目录下的各种工程),所有工程依赖相同的UI,而Turborepo初始化的项目也是这么干的。但是,我需要的是搭建一个我的UI组件库,这是与它不同的地方,app下我只需要一个文档预览工程(dumi),因此,我需要调整它的目录结构

二、调整目录结构及文件

1. 调整package.json文件

  • 安装eslint@latest(eslint提到全局,并更新到最新版本)
  • 安装@changesets/cli(版本号、changelog管理)
  • 安装commitizen cz-conventional-changelog(规范commit信息)
  • 安装@commitlint/cli @commitlint/config-conventiona husky(检验commit信息)
  • 安装lint-staged stylelint(校验规范格式)
  • 安装father(打包)
  • 增加"preinstall": "npx only-allow pnpm"只允许使用pnpm包管理器

pnpm i -Dw eslint@latest @changesets/cli commitizen cz-conventional-changelog @commitlint/cli @commitlint/config-conventional husky lint-staged stylelint father


2. 调整app目录

  • 删除web及docs目录的所有内容
  • 新建docs目录并初始化dumi项目
    从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript
  • 进入docs目录执行git init
  • 删除.fatherrc.ts文件(不需要在这打包组件)
  • .gitignore文件增加docs-dist(该目录为dumi的build产物)
  • 修改package.json文件:
    • 删除docs:build
    • 修改build:dumi build(打包直接是该文档工程打包,不打包组件)
    • 删除moduletypesfiles配置(用不着)
    • 依赖删除与外边重复的(commitlint、eslint、father、husky、lint-staged、stylelint等)

3. 调整eslint

我不准备使用它默认的eslint,因为我用不到nextjs相关的内容,我选择使用Tencent的eslint-config-alloy

  • 进入packages/eslint-config-custom目录,手动删除不需要的依赖,pnpm i eslint-config-alloy安装alloy
从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript
  • 更新eslint-plugin-react(后续补充,不是最新的出错了)

  1. 调整tsconfig
  • 删除package.json的private属性(为了后续可以正常发版)
  • 删除nextjs.js文件(不需要next的ts配置)

从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript


4. 调整ui

  • 删除turbo目录(用不着)
  • package.json文件删除generate脚本(用不着)
  • package.json文件删除eslint依赖(外边已经有了)
  • package.json文件新增脚本"build": "father build"(打包组件,app里的docs不需要了,因为UI组件包的开发在这里)
  • package.json文件修改main属性"main": "./src/index",
  • package.json文件修改types属性"main": "./src/index",
  • 新建src目录,增加button组件
    从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript
  • 修改tsconfig.json文件
{
  "extends": "tsconfig/react-library.json",
  "include": ["src"],
  "exclude": ["lib", "dist", "es", "node_modules"]
}
  • 新增.fatherrc.ts文件
import { defineConfig } from "father";
export default defineConfig({
  // more father config: https://github.com/umijs/father/blob/master/docs/config.md
  esm: { output: "es" },
  cjs: { output: "lib" },
});
  • .gitignore文件增加lib及es(该目录为ui通过father打包产物,具体名称还是根据上一步的配置来)
  • .gitignore文件删除next相关的(用不到)

5. 调整eslint配置

module.exports = {
  root: true,
  extends: ["custom"],
};

6. 调整.npmrc

  • 增加registry=你公司的私有源,开发的UI组件库发布到这(在这直接定义注册地址就比较方便了)

7. 使用commitizen规范代码提交

  • package.json文件增加"commit": "cz"脚本
  • package.json文件增加config属性
  "config": {
    "commitizen": {
      "path": "node_modules/cz-conventional-changelog"
    }
  }
  • 执行 pnpm commit测试
    从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript

8. 使用commitlint+husky进行 commit提交信息校验

  • 根目录新增commitlint.config.js文件
module.exports = { extends: ["@commitlint/config-conventional"] };
  • package.json文件增加"postinstall": "husky install"
  • 执行pnpm i生成.husky文件,初始化husky。完成后可删除postinstall属性
  • 执行npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'生成commit-msg的hook
  • package.json文件增加commitlintlint-staged属性
	"commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  },
	  "lint-staged": {
    "*.{md,json}": [
      "prettier --write --no-error-on-unmatched-pattern"
    ],
    "*.{css,less}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "*.{js,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --parser=typescript --write"
    ]
  },
  • 执行错误的commit信息测试
    从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript

9. 使用husky进行commit前的规范校验

  • 执行npx husky add .husky/pre-commit "npx --no-install lint-staged"
  • 上一步已经添加完成了lint-staged属性
  • 执行commit进行校验
    从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript

三、dev run

  • 执行pnpm dev:页面正常打开dumi运行的应用
  • docs的package.json增加ui的依赖"ui": "workspace:*"
  • 页面中使用ui包中的button组件
    从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript
    到这我们的运行时的组件与文档预览已经ok了,接下来就是ui组件的打包

四、打包

ts与eslint

他俩不需要打包,都是些配置项

UI

上文我们已经设置好了father打包的配置文件,直接执行pnpm build
从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript
生成了对应的lib和es文件夹,docs也跟着打包了,这里是turborepo的操作逻辑,我们不用关心它

  • ui的package.json中新增files属性
  • ui的package.jsonmain、types属性也要做一个修改,之前是./src
  "main": "./lib/index",
  "types": "./lib/index",
  "files": [
	  "es",
	  "lib",
	  "dist"
	],

五、发版

接下来就需要把我们的包发布到我们的私有源上了,当然开源也没有问题

我们现在有三个包,分别是eslint、typescript、ui
我们的包肯定不能叫这个名字,那我们给他们改下名字,加上组织的前缀,我这里以@you-org为例

修改所有的包名

从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript
该变更中的文件均有需要修改

使用Changesets进行版本管理并发版

  • 执行pnpm changeset init生成.changeset文件
  • 执行pnpm changeset选择要发布的包
    从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript
  • 选择版本(一版fix是patch,feat是minor)
    从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript
  • 执行changeset version增加版本号
    从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript
  • commit提交
  • 执行pnpm -r publish --tag alpha0.1.0发布版本
    从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi,OTHER,React技术栈相关,monorepo,pnpm,turbo,前端,javascript
    OK到这里就结束了~

总结

收获:从0开始搭建了一个多包(Monorepo)的UI组件模版,了解了一个简单开源UI工程应该具有的工具及搭建步骤。

不足之处在于:

  • 组件库的打包使用rollup可能会更好,但是因为额外的学习成本,还是使用了dumi上自带的father
  • 除了ui包,应该在添加一个utils包,这样才更加具有Monorepo的特性
  • tsconfigeslint包不确定是否有必要单独提成一个包,如果项目很复杂的话,eslint和tsconfig需要灵活配置的话,可能会更有用吧
  • 缺少了一些脚本,通过脚本来减少复杂的原生命令
  • 需要额外的脚手架来协调模版工作,以便不需要更改额外的package.json文件,后续也会做这方面的工作

参考文章文章来源地址https://www.toymoban.com/news/detail-637582.html

  • 打造高效Monorepo:Turborepo、pnpm、Changesets实践
  • pnpm + workspace + changesets 构建你的 monorepo 工程
  • 在 pnpm 中使用 Changesets
  • Creating a new monorepo

到了这里,关于从0开始搭建一个Monorepo模版,基于Turborepo+pnpm+changesets+dumi的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 从零开始,搭建一个简单的UVM验证平台(四)

    UVM前置基础: 1.UVM基础-factory机制、phase机制 2.UVM基础-组件(driver、monitor、agent...) 3.UVM基础-TLM通信机制(一) 4.UVM基础-TLM通信机制(二) ...还在更新 从零搭建一个UVM验证平台: 从零开始,搭建一个简单的UVM验证平台(一) 从零开始,搭建一个简单的UVM验证平台(二) 从

    2023年04月14日
    浏览(81)
  • React--》从零开始搭建一个文章后台管理系统

    目录 项目准备 项目搭建 scss预处理器的使用 配置基础路由 组件库antd的使用 开发者工具的安装 登录模块 基本样式搭建 创建表单结构 获取表单数据并进行相关登录操作 对登录模块的token进行相关处理 路由鉴权实现 后台页面模块 基本页面结构搭建 菜单高亮显示 展示个人信

    2023年04月17日
    浏览(49)
  • 算法模版,今天开始背

    二分查找算法 滑动窗口算法 上下是对称的 二叉树的层序遍历 动态规划算法 Nsum问题

    2024年02月13日
    浏览(33)
  • 什么是Dapp?带你从零开始搭建一个Dapp

    前言:Dapp就是去中心化应用,它和我们平时使用的App(微信,支付宝等)只差了一个去中心化,如何理解这一去中心化?从体验层面来说:Dapp中并没有管理者,大家都是平等的,互相监督;而从技术层面来说:传统的App和部署在服务器的后端产生交互,而Dapp则是和部署在区

    2024年02月05日
    浏览(52)
  • 提供最全面最详细的ESP32从零开始搭建一个物联网平台教程(从最基本的配网和内建WEB服务器开始到自已搭建一个MQTT服务器)

    目录 教程大纲  硬件需求 教程说明 教程章节链接 ESP32搭建WEB服务器一(AP配网) ESP32搭建WEB服务器二(STA模式) ESP32搭建WEB服务器三(AP模式与STA模式共存) ESP32搭建WEB服务器四(最简单的WEB服务器) ESP32搭建WEB服务器五(内嵌HTML) ESP32搭建WEB服务器六(利用SPIFFS存放html,css,js等文件(读取

    2024年02月13日
    浏览(65)
  • 开发那点事(十六)从零开始搭建一个NFT数字藏品平台

    写在前面的话 从6月初到七月研究了将近一个月NFT 区块链这方面的东西,从啥都不会到了解原理,总算是有点成果了,在这里分享给大家。 核心大纲 百度超级链开放网络(Solidity语言) 集成openzeppelin中的ERC721合约快速完成合约开发 Springboot 作为后台开发语言调用线上合约 通

    2024年01月16日
    浏览(56)
  • 从0.1开始搭建一个智能小车(stm32底层驱动+蓝牙操作页面开源)

    目录 一、前言 1. 欣赏一下整体效果 2. 先唠叨几句 3. 系统整体简介 二、硬件系统 1. 选型 1.1 电路部分 1.2 机械部分 2. 控制系统 三、底层驱动 1. 电机驱动 2. 舵机驱动和调速 2.1舵机驱动 2.2舵机调速 3. 蓝牙 串口屏驱动 3.1蓝牙 3.2串口屏 4. 灯带驱动 4.1普通灯效实现 4.3蹦迪灯效

    2024年02月15日
    浏览(40)
  • 【C++】从零开始认识泛型编程 — 模版

    送给大家一句话: 尽管眼下十分艰难,可日后这段经历说不定就会开花结果。总有一天我们都会成为别人的回忆,所以尽力让它美好吧。 – 岩井俊二 \\ ⱶ˝୧(๑ ⁼̴̀ᐜ⁼̴́๑)૭兯 //// \\ ⱶ˝୧(๑ ⁼̴̀ᐜ⁼̴́๑)૭兯 //// \\ ⱶ˝୧(๑ ⁼̴̀ᐜ⁼̴́๑)૭兯

    2024年04月28日
    浏览(36)
  • Monorepo 解决方案 — 基于 Bazel 的 Xcode 性能优化实践

    书接上回《Monorepo 解决方案 — Bazel 在头条 iOS 的实践》,在头条工程切换至 Bazel 构建系统后,为了支持用户使用 Xcode 开发的习惯,我们使用了开源项目 Tulsi 作为生成工具,用于将 Bazel 工程转换为 Xcode 工程。但是在使用的过程中,我们发现了一些问题,其中影响较大的是,

    2024年04月16日
    浏览(43)
  • 从零开始搭建游戏服务器 第一节 创建一个简单的服务器架构

    由于现在java web太卷了,所以各位同行可以考虑换一个赛道,做游戏还是很开心的。 本篇教程给新人用于学习游戏服务器的基本知识,给新人们一些学习方向,有什么错误的地方欢迎各位同行进行讨论。 本篇教程预计使用Java+Redis+Mongo 本着先完成再完美的原则,从最简单的

    2024年02月10日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包