Monorepo 项目实践
项目管理 Monorepo : 是一种管理项目的方式，即将多个项目放在一个仓库中，这样可以方便地管理项目之间的依赖关系，提高代码复用性，减少重复代码，提高开发效率。 依赖管理 Pnpm : 可以加速 npm 安装依赖的速度，并减少磁盘空间占用。 微前端架构 qiankun : 一种基于微前端架构的前端应用解决方案，它将一个大型前端应用拆分成多个独立的子应用，每个子应用独立开发、测试、部署，互不干扰，最终组装成一个整体的应用。 UI 组件库、工具类等共用 npm : 由于 npm 包管理工具的存在，使得多个项目可以共用同一个包，不重复安装，提高开发效率。 业务组件共用 模块联邦(Module Federation) : 它允许不同的应用或组件之间进行动态的模块共享。 样式共用 Ant Design Token : 可以将多个项目的样式变量集中管理，并通过工具生成对应的样式文件，实现样式的共享。 参考文章：【鸣谢】 带你了解更全面的 Monorepo - 优劣、踩坑、选型
模块联邦(Vite)
模块联邦 什么是模块联邦？模块联邦是 Webpack 5 的新特性，它允许不同的应用或组件之间进行动态的模块共享。 为什么要使用模块联邦？模块联邦可以解决多个应用或组件之间的依赖问题，避免重复安装依赖，提高开发效率。 Webpack Module Federation 项目地址项目目录12345678910111213141516171819|-- packages |-- host | -- src |-- App.tsx |-- vite-env.d.ts |-- vite.config.ts |-- remote |-- src |-- components |-- CustomButton |-- index.tsx |-- index.ts |-- App.tsx |-- vite.config.ts|-- lerna.json|-- package-lock.json|-- package.json|-- pnpm-workspace.yaml|--...
lerna多包项目
简介 Lerna 是一个快速、领先的构建系统，用于管理和发布来 自同一源码仓库的多个 JavaScript/TypeScript 软件包。 lerna8 + npm + workspaces + umi包版本123"node": "^20.18.0","npm": "^10.8.2","lerna": "^8.1.8", 开启 npm workspaces 命令行执行 npx lerna init, 初始化项目 lerna.json 中添加下面配置 12345{ "npmClient": "npm", "packages": ["packages/*"], ... // 其他配置} package.json 中添加下面配置 123{ "workspaces":...
上传npm包
需要 npm 账号 注册 npm 账号 常用 npm 命令 12345678910111213# 登录 npmnpm login# 发布 npm 包npm publish# 撤销发布整个包npm unpublish demo1 --force# 撤销发布指定版本npm unpublish demo1@1.0.0 --force# 撤销发布提醒npm deprecate demo1 "this project is deprecated" 手动上传 npm 包 使用 npm init 初始化项目 在 package.json 中添加发布配置, 使包公开, 私有包需要付费 123"publishConfig": { "access": "public"} 完整 package.json 1234567891011121314{ "name": "@zxiaosi/demo1", "version":...
whatsapp浏览器插件
免责声明: 本项目仅供学习交流使用，不得用于商业用途，如有侵权请联系删除 项目地址项目介绍项目目录12345678910111213141516171819202122⊢ dist # 打包后的文件 [插件文件]⊢ public # 静态资源文件 ⨽ images # 图片资源 ⨽ manifest.json # 插件配置文件 [重要] ⨽ inject.js # 注入脚本 [inject-script.js]⊢ src # 源码文件 ⨽ apis # 接口请求 ⨽ background # 后台脚本 [background-script.js] ⨽ init.ts # 后台脚本入口 ⨽...
