EMP - Micro Frontends solution

Base on Webpack 5 & Module Federation

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

👨🏻‍💻 Table of contents

📦 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.

🧞‍♂️ Command plugin development guide

command - define the name of the command line command
description - description, it will be shown in help
option - Define parameters. It accepts four parameters. In the first parameter, it can enter the short name -a and the long name -app, separated by | or,. When used on the command line, these two are equivalent. The difference is The latter can be obtained through callbacks in the program; the second is the description, which will be displayed in the help message; the third parameter is the callback function, and the parameter it receives is a string. Sometimes we need a command line to create multiple Module, you need a callback to process; the fourth parameter is the default value
action - Register a callback function, here you need to pay attention to the current callback does not support let declaration variables

plugin, the package name prefix needs to be `emp-plugin-*`, `cli.js` is the emp global plugin entry.

Create a new project with emp-plugin- as the project prefix, and the plugin entry is cli.js

module.exports = program => {
  program
    .command('helloWorldPlugin')
    .option('-i, --item <item>')
    .description([
      `It is plugin description`,
    ])
    .action(({item}) => {
      console.log(`Plugin ${item}`)
    })
}

After the development is completed (emp-plugin-example is only the example package name, the specific package name is subject to the actual package name):
Install via yarn:
- yarn global add emp-plugin-example
Install via npm:
- npm install emp-plugin-example -g

Start emp under the command to use the plugin

✨ Framework Config Plugins

Framework	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`