企业官网建设流程全解析

网站建设公司 长春,找网络公司建网站的流程,工作压力大怎样缓解焦虑情绪,北京通州马桥网站建设快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容#xff1a; 创建一个适合新手的Monorepo教学项目#xff0c;使用pnpm workspace管理包含两个简单React应用的代码库。要求提供分步指导#xff0c;包括初始化配置、共享组件开发、依赖安装和…快速体验打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容创建一个适合新手的Monorepo教学项目使用pnpm workspace管理包含两个简单React应用的代码库。要求提供分步指导包括初始化配置、共享组件开发、依赖安装和脚本命令设置并附带详细注释说明。点击项目生成按钮等待项目生成完整后预览效果最近在研究前端工程化发现很多大厂项目都在用Monorepo管理代码。作为一个刚接触这个概念的新手我花了一周时间摸清了基本玩法今天就用最直白的语言分享从零搭建的过程适合像我一样的小白快速上手。1. 什么是Monorepo简单说就是把多个项目放在同一个代码仓库里管理。比如公司有官网、后台、小程序三个前端项目传统方式是开三个Git仓库而Monorepo则放在同一个仓库的不同目录下。好处特别明显共享代码更方便比如统一的工具函数库依赖包版本统一管理跨项目修改能一次性提交2. 准备工作我用的是pnpmworkspace方案相比yarn/npm更节省磁盘空间。需要先安装到官网下载安装pnpm建议版本7.0新建空文件夹作为仓库根目录终端执行pnpm init生成package.json3. 初始化Monorepo结构关键步骤是配置workspace在根目录创建pnpm-workspace.yaml文件指定子项目位置。比如我的结构/packages/admin (后台管理系统)/packages/web (官网项目)/shared (公共组件库)对应的workspace配置只要写packages: - packages/* - shared4. 创建React子项目以admin项目为例进入packages目录用vite快速初始化React项目pnpm create vite admin --template react-ts同样步骤创建web项目这时候打开任意子项目的package.json会发现依赖都安装在各自node_modules里。接下来我们要优化这个情况。5. 提升公共依赖在根目录执行pnpm add react react-dom -w-w参数表示安装到workspace根节点这样所有子项目会共用同一份react代码。可以通过pnpm list查看依赖树验证。6. 开发共享组件在shared目录新建Button组件初始化package.json注意设置name: shared/ui编写React组件代码在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. 调试技巧遇到最多的问题是依赖引用报错分享两个排查方法用pnpm why 包名查看依赖被哪些项目引用在vscode安装Workspace插件能可视化查看项目关系9. 进阶优化方向等熟悉基础操作后可以继续探索接入Changesets管理版本发布配置Turborepo加速构建集成Storybook管理组件库最近在InsCode(快马)平台看到有现成的Monorepo模板比自己配环境省心多了。他们的在线编辑器可以直接调试部署按钮一点就能生成演示链接特别适合新手快速验证想法。像我这样的小白第一次搭Monorepo用了三天现在用平台半小时就能跑通全套流程建议大家都去试试看。快速体验打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容创建一个适合新手的Monorepo教学项目使用pnpm workspace管理包含两个简单React应用的代码库。要求提供分步指导包括初始化配置、共享组件开发、依赖安装和脚本命令设置并附带详细注释说明。点击项目生成按钮等待项目生成完整后预览效果创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考