> Base on Webpack5 Module Federation Micro Frontends solution!
npm install @efox/emp-cliEnglish | 简体中文
npx @efox/emp-cli initnpm i -g @efox/emp-cli or yarn global add @efox/emp-cli + emp init Initialize project
+ emp init -t
>The list of custom templates needs to use JSON format ("template name": "git link")
``json`
{
"react": "https://github.com/efoxTeam/emp-react-template.git",
"vue2":"https://github.com/efoxTeam/emp-vue2-template.git"
}
emp dev
+ Developmentemp dev --hot
+ Hot updateemp dev --open
+ Open the development pageemp dev -rm
+ Pull the remote declaration file into the src directory`
+ -rm --remote:The default is to get the remote address from the remoteBaseUrlList field in package.json in the format
+ javascript`
{
"remoteBaseUrlList": [
{
"url": "https://com/index.d.ts",
"name": "project.d.ts"
}
]
}
emp build
+ Buildemp build --env
+ Specify the deployment environmentemp build --analyze
+ Analyzeemp build --ts
+ Build the production environment, generate index.d.ts to dist directory at the same time emp build --ts -p [types path] -n [types name]
+ types path default relative path is dist、types name default type file name is index.d.tsemp tsc
+ generate index.d.ts to dist directory emp build --ts -p [types path] -n [types name]
+ types path default relative path is dist、types name default type file name is index.d.ts
+ emp tss Synchronization remote typeemp tss
+ types path default relative path is src、types name default type file name is empType.d.tsemp serve
+ Formal serviceemp
+ help emp dist:ts
+ Synchronize local declaration files to subprojectsemp tsc && emp dist:ts && emp dev
+ `
+ dist:ts:default reads the local package.json childPath field to loop output, try to keep base project and project project in the same level, package.json:
+ javascript`
{
"childPath": [
{
"path": "project",
"name": "xxx.d.ts"
},
{
"path": "/User/project",
"name": "xxx.d.ts"
}
]
}
+ 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
+ Create a new project with emp-plugin- as the project prefix, and the plugin entry is cli.js`javascriptIt is plugin description
module.exports = program => {
program
.command('helloWorldPlugin')
.option('-i, --item
.description([
,Plugin ${item}
])
.action(({item}) => {
console.log()`
})
}
+ 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
+ npm
+ Install via :npm install emp-plugin-example -g
+
Start emp under the command to use the plugin

+ EMP_ENV use emp dev --env prod Set up to distinguish the deployment environment , use process.env.EMP_ENV👨🏻🏭 Plugin
+ Generate type files for Module Federation project👩🏻💻 VSCODE SETTINGS
`json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true // eslint Auto format
},
"typescript.tsdk": "node_modules/typescript/lib", // ts css module type check
"typescript.enablePromptUseWorkspaceTsdk": true // ts css module type check
}``