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 详见 Monorepo管理工具 微前端架构 Qiankun:可能是你见过最完善的微前端解决方案...
Docker Compose 部署单机版 Nacos
Docker Compose 安装 前提准备版本说明 mysql:8.0.31 nacos/nacos-server:v2.2.2 spring-boot 2.6.13 spring-cloud 2021.0.5 spring-cloud-alibaba 2021.0.5.0 目录结构 获取 nacos 配置文件 拉取镜像 1docker pull nacos/nacos-server:v2.2.2 启动服务(这个服务能运行就行,主要是为了拷贝文件) 1docker run -d --name nacos -e mode=standalone -d -p 8848:8848 nacos/nacos-server:v2.2.2 从容器中复制所需文件到宿主机中 1234567# docker cp 容器名:文件 宿主机文件# 拷贝 logs 文件docker cp nacos:/home/nacos/logs/ /opt/docker/nacos/# 拷贝 conf 文件夹docker cp nacos:/home/nacos/conf/...
Qiankun 打包优化
文章参考下面两个 issues:提取公共依赖 doc、qiankun 如何复用公共依赖 思路 方式一:通过 CDN 引入公共依赖,并在主子应用中排除这些公共依赖。(如果 CDN网站 挂了,网站也就挂了,有风险) 方式二:将 CDN 资源下载到 public 文件夹下,并在主子应用中排除这些公共依赖。防止每个应用都在 public 中引入依赖,这里将 public 文件指定为 libs,统一存放公共依赖。 项目地址创建项目初始化项目 项目目录结构 123456789101112131415161718192021222324252627|── 项目根目录│ ├── libs # 存放公共依赖(使用cdn方式不需要这个文件夹)│ │ ├── react@18.3.1│ │ │ ├── react.development.js│ │ │ ├── react.production.min.js│ │ ├── react-dom@18.3.1│ │ │ ├──...
React Flow
React Flow React Flow 一个可定制的 React 组件,用于构建基于节点的编辑器和交互式图表 官网提供了大量示例,以及在线演示。建议看完每个示例,很有用!!! 其他参考:Vue Flow 代码地址在线演示 自动布局示例 参考官网示例:Dagre Tree 使用 Dagre 时注意事项 Dagre 布局算法需要指定节点的宽和高,否则会报错 @dagrejs/dagre v1.1.4 在老版浏览器 (eg: chromev89.0.4389.90) 会报 Object.hasOwn is not a function 错误,降级为 @dagrejs/dagre v1.1.3 即可解决 官网示例下面有公开的代码,此处不再贴出代码 复制粘贴示例 参考官网示例:Copy and...
React Compiler
React Compiler React Compiler 是目前在 RC 中的一个新编译器,会自动记住你的代码,避免忘记或者错误的使用 useMemo、useCallback、React.memo 等 React 的 API 项目地址创建 React Compiler 应用新建一个项目1234567891011# 通过 vite 创建项目npm create vite@latest# Project name:react-compiler# Select a framework:React# Select a variant: (这里一定要选择 TypeScript, 因为 TypeScript+SWC 还没有适配)TypeScript 安装配置依赖 安装 babel-plugin-react-compiler 和 eslint-plugin-react-hooks 12npm install --save-dev --save-exact babel-plugin-react-compiler@rcnpm install --save-dev...