EMP - Micro Frontends solution

Base on Webpack 5 & Module Federation

English | 简体中文 | Discussions

An implementation of Micro Frontends, based on Webpack5 Module Federation, but made it production-ready.

👨🏻‍💻 Table of contents

• Projects
• Documentation
• Quick Overview
• Framework Config Plugins
• EMP multi-frame intermodulation conversion plug-in
• Demos
• Use multiple frameworks in EMP Application
• Community

📦 Projects

Project	NPM	Info
@efox/emp-cli		CLI
@efox/emp-tsconfig		Typescript Config
@efox/emp-tune-dts-plugin		Webpack Plugin for Module Federation Project in Typescript
@efox/eslint-config-react-prittier-ts		ESLint Config
@efox/emp-sync-vscode-plugin		EMP Type Synchronize VSCode Plugin

📖 Documentation

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

💿 Quick Overview

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

• If you've previously installed @efox/emp-cli,globally via npm install -g @efox/emp-cli or yarn global add @efox/emp-cli .

• we recommend you uninstall the package using npm uninstall -g @efox/emp-cli or yarn global remove @efox/emp-cli to ensure that npx always uses the latest version.

• run cd my-emp && yarn && yarn dev,the project will automatically open in the browser.

• If you want to know more about the use of @efox/emp-cli, go to emp-cli.

✨ Framework Config Plugins

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

⚡ Compile

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

⚡ EMP multi-frame intermodulation conversion plug-in

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

📦 Demos

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
	antd-base antd-project	cd projects && yarn dev:antd
	preact-base preact-project	cd projects && yarn dev:preact
	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

💪 Use multiple frameworks in EMP Application

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

👬 Community

• WeChat Group：

• WeChat Official Account： Efox

• Juejin：

https://juejin.cn/user/483440843559406/posts

• oschina:

https://my.oschina.net/u/568478