仿腾讯视频网站,四川水利工程造价信息网,网站方案制作,开家网站建设培训学校目录
背景
需求和方案
从0开始搭建一个Monorepo项目
创建
配置全局公共样式
配置全局公共组件
方式1：不需要独立发布的组件包，只在当前项目的子项目中使用
方式2：需要独立发布和版本维护的包
子项目的独立构建和部署
总结
Monorepo优势
便于代码维护、管理
支持…目录
背景
需求和方案
从0开始搭建一个Monorepo项目
创建
配置全局公共样式
配置全局公共组件
方式1：不需要独立发布的组件包，只在当前项目的子项目中使用
方式2：需要独立发布和版本维护的包
子项目的独立构建和部署
总结
Monorepo优势
便于代码维护、管理
支持多目录结构
优化开发流程、提升开发效率
Monorepo缺点
权限管理问题
代码管理 背景
随着业务不断增加，公司项目越来越多、沉淀的功能组件、工具包、UI、业务组件等内容越来越多，模块不断增长，一个组件一个仓库（Mulitrepo）虽然从业务逻辑上解耦，但是也增加了管理难度： 依赖关系不清晰、管理复杂 配置无法共享 代码共享流程复杂，每次发布之后需要在项目中手动更新版本进行测试，效率低 在现代前端开发中，Monorepo是一种越来越流行的代码管理方式，它通过将多个相关包集中在一个仓库中进行管理，带来了更高效的开发体验和更简单的依赖管理。 需求和方案
需求： 多项目整合与独立运行 公共组件和样式共享 方案：
pnpm 是一种高效的包管理工具，它通过去重存储依赖和工作空间功能，为 Monorepo 项目提供了强大的支持。
上述需求可以通过在pnpm配置workspace工作空间（官网链接）来实现。 从0开始搭建一个Monorepo项目
创建
1.新建一个workspace文件夹，初始化
pnpm init
生成一个package.json文件 2.删除package.json文件中的main、test字段
由于工程根目录 package.json 不需要发包，需要配置 "private": true。
{"name": "workspace","version": "1.0.0","description": "","private": true,"scripts": {},"keywords": [],"author": "","license": "ISC"
} 3.根目录下新建pnpm-workspace.yaml文件（更多）
packages:
# packages/ 直接子目录中的所有包
- 'packages/*'
4.新建多包目录，例如workspace下新建一个文件夹packages，用于存放后续的各个项目
5.packages文件夹下新建2个vue项目
// 创建第一个
pnpm create vite app-first --template vue// 创建第二个
pnpm create vite app-second --template vue 找到这2个子项目的vite.config.js文件，配置2个项目不同的端口号，避免端口冲突 server: {port: 3000,} 6.workspace根目录下执行安装依赖
pnpm i 执行之后根目录和2个子项目下都会生成各自的node_module文件。
7.配置根目录下package.json下子项目启动和构建脚本 "scripts": {"dev:first": "pnpm run -C packages/app-first dev","dev:second": "pnpm run -C packages/app-second dev","build:first": "pnpm run -C packages/app-first build","build:second": "pnpm run -C packages/app-second build"},
若需要同时启动2个项目，需要安装依赖concurrently
pnpm install --save-dev concurrently
若遇到报错，按照报错信息修改命令即可
