EMP - 微前端解决方案

Base on Webpack 5 & Module Federation 讨论组

这是一个面向未来的，基于Webpack5 Module Federation搭建的微前端解决方案。

👨🏻‍💻 目录

• 生态总揽
• 教程文档
• 快速开始
• 框架配置插件
• EMP多框架互调转换插件
• 演示
• EMP多框架互调用例
• 用例展示
• 交流社区

📦 生态总揽

Project	NPM	Info
@efox/emp-cli		脚手架
@efox/emp-tsconfig		Typescript 类型统一配置
@efox/emp-tune-dts-plugin		Typescript 类型同步
@efox/eslint-config-react-prittier-ts		代码规范统一配置
@efox/emp-sync-vscode-plugin		EMP 类型同步 VSCode插件

📖 教程文档

https://github.com/efoxTeam/emp/wiki

💿 快速开始

npx @efox/emp-cli init
cd my-emp && yarn && yarn dev

• 如果你想预先安装 @efox/emp-cli，可以通过全局安装 npm install -g @efox/emp-cli 或 yarn global add @efox/emp-cli 。

• 建议你卸载该包使用 npm uninstall -g @efox/emp-cli or yarn global remove @efox/emp-cli 确保 npx 使用的 @efox/emp-cli 是最新版本。

• 执行 cd my-emp && yarn && yarn dev 之后，项目将会自动打开在浏览器。

• 如果想了解更多关于 @efox/emp-cli 的使用，到 emp-cli了解更多。

✨ 框架配置插件

Framework	NPM	demo	project	install
react		demo	@efox/emp-react	yarn add @efox/emp-react -D
vue2		demo	@efox/emp-vue2	yarn add @efox/emp-vue2 -D
vue3		demo	@efox/emp-vue3	yarn add @efox/emp-vue3 -D
svelte		demo	@efox/emp-svelte	yarn add @efox/emp-svetle -D
preact		demo	@efox/emp-preact	yarn add @efox/emp-preact -D
cocos2d		demo	@efox/emp-cocos2d	yarn add @efox/emp-cocos2d -D

⚡ 构建

Framework	NPM	demo	install
emp-swc		plugin react-demo	yarn add @efox/emp-swc

⚡ EMP多框架互调插件

Framework	NPM	demo	install
emp-vue2-in-vue3		demo	yarn add @efox/emp-vuett

📦 演示

Framework	demo	cli
	react-demo1 react-demo2	cd projects && yarn dev
	vue3-base vue3-project	cd projects && yarn dev:vue
	vue2-base vue2-project	cd projects && yarn dev:vue2
	preact-base preact-project	cd projects && yarn dev:preact
	antd-base antd-project	cd projects && yarn dev:antd
	cocos2d-base cocos2d-project	cd projects && yarn dev:cocos2d
	https	cd projects/https && yarn dev
	dynamic-system-host	cd projects && yarn dev:dynamichost
	dotenv	cd projects/empty-project && yarn dev

💪 EMP多框架互调用例

Framework	demo	cli
	React 16 & React 17	cd projects && yarn dev:reactdiff
	Vue use React & React use Vue	cd projects && yarn dev:reactvue
	Vue3 & Vue2	cd projects && yarn dev:vue23

🎯 用例展示

Framework	demo	cli
	react-demo1 react-demo2	cd projects && yarn dev
	vue3-base vue3-project	cd projects && yarn dev:vue
	antd-base antd-project	cd projects && yarn dev:antd
	preact-base preact-project	cd projects && yarn dev:preact
	https	cd projects/https && yarn dev
	dynamic-system-host	cd projects && yarn dev:dynamichost
	react vue	cd projects && yarn dev:reactvue

👬 交流社区

• 微信交流群：

• 微信公众号： Efox

• 掘金： https://juejin.cn/user/483440843559406/posts

• 开源中国： https://my.oschina.net/u/568478