Monorepo 项目实践
上传npm包 lerna多包项目 思路项目管理 Monorepo : 是一种管理项目的方式,即将多个项目放在一个仓库中,这样可以方便地管理项目之间的依赖关系,提高代码复用性,减少重复代码,提高开发效率。 依赖管理 Pnpm : 可以加速 npm 安装依赖的速度,并减少磁盘空间占用。 微前端架构 qiankun : 一种基于微前端架构的前端应用解决方案,它将一个大型前端应用拆分成多个独立的子应用,每个子应用独立开发、测试、部署,互不干扰,最终组装成一个整体的应用。 UI 组件库、工具类等共用 npm : 由于 npm 包管理工具的存在,使得多个项目可以共用同一个包,不重复安装,提高开发效率。 业务组件共用 模块联邦(Module Federation) : 它允许不同的应用或组件之间进行动态的模块共享。 样式共用 Ant Design Token : 可以将多个项目的样式变量集中管理,并通过工具生成对应的样式文件,实现样式的共享。 仓库地址搭建项目创建 lerna 项目 新建一个空文件夹 在根目录下执行 npx lerna init, 初始化项目 开启...
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|--...
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":...