腾讯无界微前端源码分析

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命名一键启动所有例子:

相关推荐
卷福同学4 小时前
AI编程出海第二步:验证关键词能否做站
前端·人工智能·后端
赵庆明老师4 小时前
Vben精讲:21-详解web-antd:tsconfig.json
前端·json·vim
wc884 小时前
微软EDGE浏览器功能学习
前端·学习·edge
Csvn5 小时前
🎯 原生 `<dialog>` 元素:终于可以扔掉一半的自定义弹窗组件了?
前端
Csvn5 小时前
🎨 CSS @layer:用「层叠优先级」终结样式打架的世纪难题
前端
濮水大叔5 小时前
不必把 Vue3 写成“麻花”:从状态碎片到对象协作,重新理解 Zova 的前端心智模型
前端·typescript·vue3·ioc·tsx·zova
Vuji6 小时前
MCP: 一条 tool 调用链路的旅程
前端·人工智能
万少7 小时前
DeepSeek-V4-Flash 正式版上线了,但这 3 个坑我帮你提前踩了
前端·javascript·后端
明月_清风7 小时前
🚀 Palantir Foundry 本体论实战:当 Ontology 从"知识图谱"进化为"企业操作系统"
前端·后端
驳是7 小时前
入坑 Nginx,看这一篇就够了
前端