前言

最近需要用到多包管理 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 搭建开发构建环境实践 .

最后此篇关于monorepo实践：yarnworkspace+vite+typescript+react的文章就讲到这里了,如果你想了解更多关于monorepo实践：yarnworkspace+vite+typescript+react的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。