Monorepo 项目实践
介绍 Monorepo : 是一种管理项目的方式，即将多个项目放在一个仓库中，这样可以方便地管理项目之间的依赖关系，提高代码复用性，减少重复代码，提高开发效率 项目管理工具 Lerna + Npm/Yarn/Pnpm Workspaces：一个快速、领先的构建系统，用于管理和发布来 自同一源码仓库的多个 JavaScript/TypeScript 软件包 Lerna-Lite + Npm/Yarn/Pnpm Workspaces：Lerna-Lite is a super light version of the original Lerna (Lerna-Lite 是原始 Lerna 的超轻版本) Yarn Workspaces Pnpm Workspaces 详见 Monorepos管理工具 微前端架构 Qiankun：可能是你见过最完善的微前端解决方案...
Node Cli
Node Cli 常用工具介绍 commander : 用于命令行参数解析 inquirer : 用于命令行交互 ora : 用于 loading 效果 figlet : 用于输出 ASCII 文艺字 picocolors : 用于输出样式 axios : 用于网络请求 simple-git : 用于下载远程仓库 cross-env : 用于兼容不同平台以及设置环境变量 仓库地址新手教程项目目录12345|-- node-cli |-- .gitignore // git 忽略文件 |-- index.js // 入口文件 |-- package.json // 项目配置 |-- README.md // 项目说明 配置项目 初始化项目 1npm init -y 修改 package.json...
Qiankun+Vite样式隔离解决方案
问题 Qiankun + Vite 作为子应用时，样式隔离无效 即使配置了 experimentalStyleIsolation: true 也无效 解决方案：使用 postcss-prefix-selector 插件为样式添加前缀 配置插件 在子应用 vite.config.ts 中配置插件（官方示例） 123456789101112131415161718192021222324252627282930313233import prefixer from 'postcss-prefix-selector';...export default defineConfig({... css: { postcss: { plugins: [ prefixer({ prefix: '[data-qiankun-app]', transform(prefix, selector, prefixedSelector,...
模块联邦(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|--...
Qiankun模板
简介 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":...
