知识了解02——了解pnpm+vite+turbo+monorepo的完整构建步骤(react子项目)

(1)初始化monorepo

1)创建项目目录并进入当前目录

2)初始化 pnpm 工作区,生成一个package.json文件

3)在项目根目录下创建 pnpm-workspace.yaml 文件,并定义工作区目录

(2)安装 Turborepo

1)安装 Turborepo

2) 在项目根目录下创建 turbo.json 文件,配置构建任务

(3)创建 React 子项目

1)创建 packages 目录

2) 使用 Vite 创建 React 子项目

3)配置子项目

①进入每个子项目目录,安装依赖并配置 vite.config.js(以app1为例,app2步骤相同)
②在 vite.config.js 中,确保配置正确(默认配置通常已足够)

(4)配置子项目依赖(可选)

1)子项目之间相互依赖

如果 app1 需要依赖 app2 的某个模块,可以在 app1 中安装 app2

2)共享依赖

如果多个子项目需要共享某些依赖(如 react、react-dom),可以在根目录安装这些依赖

(5)配置脚本

1)在根目录的 package.json 中添加脚本和packageManager(包管理工具)(属性值为pnpm的版本,使用pnpm -v获取)

2)在子项目的 package.json 中添加脚本

(6)运行项目

1) 启动开发服务器

2)构建项目

相关推荐
小年糕是糕手13 小时前
【C++同步练习】模板初阶
服务器·开发语言·前端·javascript·数据库·c++·改行学it
纸人特工13 小时前
NuxtHub部署nuxt项目就是方便
前端
_默_13 小时前
前端常用依赖归纳【vueuse\lodash-es\dayjs\bignumber】
大数据·前端·elasticsearch
北辰alk13 小时前
React页面刷新数据不丢失?5种方案全解析!
react.js
Spirited_Away13 小时前
修改请求头插件迁移manifest V3记录
前端·chrome
cindershade13 小时前
使用 SSE 单向推送实现 系统通知功能
前端
Mapmost13 小时前
【高斯泼溅】Mapmost分区训练,让大场景3DGS建模从此高效且高质
前端
进击的野人13 小时前
Vue生命周期详解:从创建到销毁的全过程
前端·vue.js·面试
鹏北海13 小时前
微前端实现方式:HTML Entry 与 JS Entry 的区别
前端·javascript·面试
用户40993225021213 小时前
Vue3的`:style`对象语法:单位、属性名、响应式,这些细节你都踩过坑吗?
前端·ai编程·trae