企业官网建设流程全解析

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   创建一个适合新手的Monorepo教学项目，使用pnpm workspace管理包含两个简单React应用的代码库。要求提供分步指导，包括初始化配置、共享组件开发、依赖安装和脚本命令设置，并附带详细注释说明。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果

最近在研究前端工程化，发现很多大厂项目都在用Monorepo管理代码。作为一个刚接触这个概念的新手，我花了一周时间摸清了基本玩法，今天就用最直白的语言分享从零搭建的过程，适合像我一样的小白快速上手。

1. 什么是Monorepo？

简单说就是把多个项目放在同一个代码仓库里管理。比如公司有官网、后台、小程序三个前端项目，传统方式是开三个Git仓库，而Monorepo则放在同一个仓库的不同目录下。好处特别明显：

• 共享代码更方便（比如统一的工具函数库）
• 依赖包版本统一管理
• 跨项目修改能一次性提交

2. 准备工作

我用的是pnpm+workspace方案，相比yarn/npm更节省磁盘空间。需要先安装：

1. 到官网下载安装pnpm（建议版本7.0+）
2. 新建空文件夹作为仓库根目录
3. 终端执行pnpm init生成package.json

3. 初始化Monorepo结构

关键步骤是配置workspace，在根目录创建pnpm-workspace.yaml文件，指定子项目位置。比如我的结构：

• /packages/admin (后台管理系统)
• /packages/web (官网项目)
• /shared (公共组件库)

对应的workspace配置只要写：

packages: - 'packages/*' - 'shared'

4. 创建React子项目

以admin项目为例：

1. 进入packages目录
2. 用vite快速初始化React项目：pnpm create vite admin --template react-ts
3. 同样步骤创建web项目

这时候打开任意子项目的package.json，会发现依赖都安装在各自node_modules里。接下来我们要优化这个情况。

5. 提升公共依赖

在根目录执行：

pnpm add react react-dom -w

-w参数表示安装到workspace根节点，这样所有子项目会共用同一份react代码。可以通过pnpm list查看依赖树验证。

6. 开发共享组件

在shared目录新建Button组件：

1. 初始化package.json（注意设置"name": "@shared/ui"）
2. 编写React组件代码
3. 在admin和web项目中通过pnpm add @shared/ui -F admin安装（-F指定安装到特定项目）

现在修改Button组件时，两个项目会实时同步更新，不用手动复制粘贴。

7. 配置统一脚本

根目录的package.json可以添加这些实用命令：

"scripts": { "dev": "pnpm --parallel -r dev", "build": "pnpm -r build", "lint": "pnpm -r lint" }

解释几个参数： - -r 在所有子项目运行 - --parallel 并行执行（适合dev热更新） 现在执行pnpm dev能同时启动所有前端项目！

8. 调试技巧

遇到最多的问题是依赖引用报错，分享两个排查方法：

1. 用pnpm why 包名查看依赖被哪些项目引用
2. 在vscode安装Workspace插件，能可视化查看项目关系

9. 进阶优化方向

等熟悉基础操作后，可以继续探索：

• 接入Changesets管理版本发布
• 配置Turborepo加速构建
• 集成Storybook管理组件库

最近在InsCode(快马)平台看到有现成的Monorepo模板，比自己配环境省心多了。他们的在线编辑器可以直接调试，部署按钮一点就能生成演示链接，特别适合新手快速验证想法。像我这样的小白第一次搭Monorepo用了三天，现在用平台半小时就能跑通全套流程，建议大家都去试试看。

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

   创建一个适合新手的Monorepo教学项目，使用pnpm workspace管理包含两个简单React应用的代码库。要求提供分步指导，包括初始化配置、共享组件开发、依赖安装和脚本命令设置，并附带详细注释说明。

3. 点击'项目生成'按钮，等待项目生成完整后预览效果