mob日语（monorepo实践：yarn workspace + vite + typescript + react）

前言

最近需要用到多包管理 monorepo 开发新项目
  
  
  
  
  
  
  
  
 ，所以提前预研一下项目搭建
  
  
  
  
  
  
  
  
 。

monorepo(monolithic repository)是一种项目架构 
  
  
  
  
  
  
  
  ，就是用一个仓库管理多个项目（应用 


 


 


 


 


 


 


 


 

，库）
 
 
 
 
 
 
 
 
，react和babel的源码仓库都是用这种方式在管理 
  
  
  
  
  
  
  
  。

优缺点略过  
   
   
   
   
   
   
   
   ，可以参考：精读《Monorepo 的优势》 


 


 


 


 


 


 


 


 

。

因为不需要 npm 发包之类的 

 

 

 

 

 

 

 

 
，所以没用 lerna

 

 

 

 

 

 

 

 

，就用 yarn workspace 就可以解决了                 ，技术组合：yarn workspace + vite + typescript + react
 
 
 
 
 
 
 
 
。

使用 yarn workspace 管理 monorepo 的依赖包

通过 yarn workspace 可以管理 monorepo 的共同依赖包

使用命令创建一个根目录项目 workspace

yarn create vite

这样我们得到一个简单的基于 vite+react+ts 的脚手架项目 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，但其实我们只需要package.json                 、gitignore  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
、tsconfig.json
















、tsconfig.node.json四个文件

















，其他的都删掉  
   
   
   
   
   
   
   
   。

在workspace的package.json中加入配置：

"workspaces": [ "packages/*" ],

这样便可以声明我们使用 monorepo 的方式管理 packages 下的多个包 

 

 

 

 

 

 

 

 
。

在workspace根目录下创建 packages 文件夹                         ，然后在 packages 文件夹下运行命令

yarn create vite

创建多个子项目 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，如：@hanzilu/root
  
  
  
  
  
  
  
  
 、@hanzilu/mobile  
  
  
  
  
  
  
  
 、@hanzilu/common

 

 

 

 

 

 

 

 

。

此时我们直接在workspace运行命令安装 root 项目的依赖：

yarn workspace @hanzilu/root install

我们会发现安装的依赖包直接安装在了workspace下的node_modules中

























，而不是在 @hanzilu/root 项目下                 。

在workspace下运行命令：

yarn workspace @hanzilu/root dev

就可以启动 root 文件夹下的项目了 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 。

不过我们不可能一个个去安装所有子项目                 ，那么就直接在workspace下运行命令即可：

yarn install

更多的一些常用命令：

yarn workspaces info [--json] 显示当前各个子项目之间的依赖关系树 yarn workspaces add / remove / upgrade [package] 新增
 


 


 


 


 


 


 


 


 
、删除
 
 
 
 
 
 
 
 
、更新全局依赖 yarn workspace [name] add / remove / upgrade [package] 某个子项目新增   
   
   
   
   
   
   
   
  、删除
 

 

 

 

 

 

 

 

 
、更新依赖 yarn worspace [name] [command] 执行某个项目下的命令

通用的 typescript 配置

上面的项目中并不是共用同一个 typescript 配置的 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，所以我们需要删除各个子项目中的tsconfig.json和tsconfig.node.json

















。

然后我们修改workspace下的tsconfig.json中 include 为：

"include":["packages/**/src"],

也就是把 typescript 配置应用到这个目录下                         。

同样的tsconfig.node.json中的配置改为：

"include": ["packages/**/vite.config.ts"]

对本地依赖项目的处理

我们使用多包管理
















，可能是两个不同的项目比如 @hanzilu/root 和@hanzilu/ mobile
  
  
  
  
  
  
  
  
 ，想要使用统一的组件或者方法 
  
  
  
  
  
  
  
  ，这个方法在我们的 @hanzilu/common 中 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 。

那么首先改造一下我们的 common 项目,在 package.json 中将添加入口：

"main":"./src/main.tsx",

然后将 main.tsx 内容改为：

const HelloWorld: React.FC = () => { return <div className="App">HelloWorld</div>; }; export default HelloWorld;

现在我们的 common 就是个很简单的 HelloWorld 组件

























。

那么我们怎么去让@hanzilu/root 能够使用到这个组件呢？

我们就像安装依赖库一样运行命令：

yarn workspace @hanzilu/root add @hanzilu/common@0.0.1

引用的时候也和依赖库一样：

import HelloWorld from "@hanzilu/common";

但是到了这一步你的 typescript 提示会报错 


 


 


 


 


 


 


 


 

，你需要在workspace下的 tsconfig.json 加上这段配置：

"compilerOptions": { //... "baseUrl": "./", "paths": { "@hanzilu/*": ["packages/*"] }, }

去告诉 typescript
 
 
 
 
 
 
 
 
，@hanzilu/系列的包实际上是用的本地的 packages 目录下的内容                 。

至此  
   
   
   
   
   
   
   
   ，我们就可以正常进行项目的开发了 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。

简化命令行

在进行上面操作的时候 

 

 

 

 

 

 

 

 
，应该会明显感觉到命令行太长

 

 

 

 

 

 

 

 

，输入太繁琐
















。

所以我们需要在 package.json 中对常用的命令                 ，进行简化：

"root": "yarn workspace @hanzilu/root", // 简化命令 "mobile":"yarn workspace @hanzilu/mobile", "dev:root": "yarn root dev", // 开发root "dev:mobile": "yarn mobile dev", "build:root": "yarn root build", // 构建root "build:mobile": "yarn mobile build"

总结

总体而言没遇到什么大问题 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，挺好用的

















，可能也跟刚接触不知坑之深浅有关
  
  
  
  
  
  
  
  
 。

关于 react 和 vite 的部分直接省略了                         ，如果想要了解可以查看我的这篇文章：Vite+React 搭建开发构建环境实践 
  
  
  
  
  
  
  
  。