pnpm + workspace + React + webpacke5 的 monorepo 实践案例

package.json 中存在各种各样的依赖定义：dependencies、devDependencies、peerDependencies、optionalDependencies、bundle

本文为手把手指南，在vue3 + ts + vite项目中使用eslint + prettier + stylelint +husky，旨在通过这些工具提高项目代码质量和统一格式、风格。

用pnpm、turbo、nestjs搭建monorepo项目客，通过ts-rest定义API合约，共享前、后端Typescript Api类型，且自动推导出api的ts类型。

讲述 pnpm、monorepo、包管理的前置知识以及相关技术的选型理由，并搭建出 monorepo 组件库项目的目录结构。

引言： 当下前端组件库 / 工具库的最佳实践方案基本都是 pnpm + monorepo 的开发模式，如 Vue、React、Vite、Element UI、Varlet UI、Vant UI 等。

1. 背景 随着部门业务不断迭代，沉淀了大量的业务组件库。初期业务系统不复杂时，组件库通常都是 Multirepo 方式组织（即一个组件库一个仓库），随着业务复杂度不断提升，模块数量飞速增长，Mult

... 为什么呢？因为我需要一个自己对其高度熟悉的系统，这样有什么问题，我都知道问题出在哪，因为之前的这些系统，当然很好，但是无论是主题的编辑，还是代码的部署以及自定义，这些都不能满足我的要求。 话说回来，当我实现好了基础功能和页面之后，我开心了好一会儿，然后把一些还有意义的博…

发现webpack打包没有问题。 二、打包后的文件也没有问题。 三、打包后生成的index.html文件引入。 开始寻找解决办法，方法有很多，有前端配置的，也有后端配置的。 注：meta是tml语言head区的一个辅助性标签，其中的http-equiv字段定义了服务器和用户代理…