腾讯无界微前端源码分析

1.环境准备,node,pnpm,lerna,webpack,webpack-cli

node版本最好使用14的,相关的pnpm,lerna,webpack,webpack-cli需要适配node14,不然无法启动项目;

lerna.json配置文件中规定了"npmClient": "pnpm",pnmp的配置文件pnpm-workspace.yaml,因此本地环境必须先安装pnpm;

2.知识储备

https://pnpm.io/zh/ pnmp中文网,

https://lerna.nodejs.cn/ lerna 中文网,

https://webpack.docschina.org/ webpack 中文网

3.目录结构分析

docs:文档,使用vitepress技术构建

examples:例子

packages:核心源码,打包输出给例子用,无界微前端核心源码;

scripts:每个脚本的主要作用(local-vue2-build.sh举例:定位到项目根目录, 构建 vue2 示例(examples/vue2), 清理旧构建产物, 移动新构建产物到 demo-vue2 目录, 复制 index.html → 404.html(SPA 回退支持), Git 提交并推送到远程(自动部署))

4.启动项目步骤

4.1在项目根目录下运行命令:pnpm i ,pnpm会根据配置文件pnpm-workspace.yaml,查找相关目录下的所有package.json安装相关依赖,生成node_modules文件;

4.2源码构建组件输出

因为例子里面的examples\main-vue\package.json ==> "wujie": "workspace:^1.0.29",里面的工作空间协议 (workspace:)https://pnpm.io/zh/workspaces,规定了从本地引用wujie\wujie-vue2\wujie-vue3,所以先在packages包下面执行构建命令,构建到相关的lib下面

4.3启动例子

可以单独启动:

也可以用lerna命名一键启动所有例子:

相关推荐
weedsfly19 小时前
异步编程全景与事件循环——彻底搞懂 JS 执行机制
前端·javascript
用户0595401744619 小时前
AI Agent记忆测试踩坑实录:Mock骗了我一周,Mem0+pytest一招破局
前端·css
用户17335980753719 小时前
纯前端 PDF 数字签名实战:Vue 3 + pdf-lib 在浏览器里完成签名嵌入
前端·javascript
IT_陈寒20 小时前
SpringBoot自动配置的坑,我爬了三天才出来
前端·人工智能·后端
Avan_菜菜1 天前
AI 能写代码了,为什么我反而开始要求它先写文档?
前端·github·ai编程
爱勇宝1 天前
鸿蒙生态的下半场:开发者不只要能开发,还要能赚钱
android·前端·程序员
IT_陈寒1 天前
SpringBoot这个自动配置坑我跳了三次
前端·人工智能·后端
kyriewen1 天前
我用 AI 一周写完了整个项目,上线第一天就崩了——这是我踩过最贵的 5 个坑
前端·javascript·ai编程
牧艺1 天前
从零到协同:构建类飞书在线文档系统的五个技术重难点
前端·人工智能
红尘散仙1 天前
想写一个像样的终端 App?试试把 React 的开发体验搬进 Rust TUI
前端·rust