EMP Micro Front-end – Get you started quickly!

This article describes how to access and use EMP in the React project. There are two main scenarios. The first scenario is to initialize the new project through @efox/emp -CLI (default access), and the second scenario is how to modify the EMP of the existing React project.

More and more companies and teams are using the micro front end (what is the micro front end can be clicked here), today xiaobi will take you to quickly feel the development experience of the EMP micro front end (what is the EMP click here +1), no more words, start ~

Use EMP out of the box

Learn about emP commands

EMP maintains a set of CLI scaffolding and a series of templates that beginners can use out of the box.

First we can install @efox/emp-cli globally

yarn global add @efox/emp-cli
// or npm i -g @efox/emp-cli 
Copy the code

After the installation is successful, we can enter the command to view the version:

emp -v
Copy the code

Of course, we can also view to help better understand the use of emP commands:

emp -h
Copy the code

Initialize two application projects

Next, we will set up two application projects, named React-Base and React-Project, under the guidance of EMP initialization. We will experience how resources are shared between the two projects.

We first execute the initialization instruction, and then follow the instructions to complete the initialization of the project. For the template, we first select React – Base

emp init
Copy the code

We can take a look firstreact-baseThe directory:

Of particular interest is the file emp-config.js. Mf/webPack mf/webpack MF/webPack MF/webPack MF

config.plugin('mf').tap(args => { args[0] = { ... args[0], ... Library: {type: 'var', name: projectName}, // The filename that was imported remotely 'emp. Js ', remotes: {// Remote project alias: @emp/react-project': 'empReactProject', }, // The object to be exposed: {// Alias: the path of the component './configs/index': 'SRC /configs/index', //... }, // Dependencies that need to be shared: {... dependencies}, }, } return args })Copy the code

Parameter Meanings:

Let’s take a look at the HTML plugin’s parameters:

Plugin (' HTML ').tap(args => {args[0] = {... args[0], ... {// head's title title: 'emp-base-project ', // remote call Project's file link files: {js: ['http://localhost:8002/emp.js'], }, }, } return args })Copy the code

Parameter Meanings:

The react-base emp.config.js file is used to configure resources for other applications, and how to share resources with others. Remember to select the React-Project template:

React-base and react-project declare a Hello component in the emp.config.js configuration file:

An object reception: {// alias: assemblies' path './components/Hello': 'SRC /components/Hello',},Copy the code

React-project declares that the Hello component of the react-base project is needed in the emp.config.js configuration file:

@emp/react-base: 'empReactBase',},Copy the code

React-project uses the Hello component of the React-base project:

import HelloDEMO from '@emp/react-base/components/Demo' const App = () => ( <> // ... <HelloDEMO /> // ... < / a >)Copy the code

So let’s run the react-base and react-project projects to see what the Hello component looks like:

cd react-base && yarn && yarn dev
cd react-project && yarn && yarn dev
Copy the code

Congratulations on your first step into the EMP micro front end!!

There are so many things that can be shared between applications, including UI components, functions and even apps, so give it a try

An existing project is connected to EMP

In many cases, our application microfrontend wants to be seamlessly integrated into existing projects. So, how to seamlessly access EMP in the middle of the existing React project to truly feel the charm of EMP? Let’s do it together

1. Modify the package. Json

We can use the package.json command in the react-base and react-project projects above to add scripts to existing projects as needed:

"scripts": {
    "dev": "emp dev"."dev:hot": "emp dev --hot"."build": "emp build"."build:ts": "emp build -t"."build:lab": "emp build --env lab"."tss": "emp tss http://localhost:8001/index.d.ts -n @emp-react-base.d.ts"."start": "emp serve"."analyze": "emp build --analyze"
},
Copy the code

2. Add the emp – config. Js

/ / react-base/react-project/emp-config.js / / react-base/react-project / / emp-config.js / / react-base/react-project / /

const path = require('path')
const packagePath = path.join(path.resolve('/'), 'package.json')
const {dependencies} = require(packagePath)
console.log(packagePath)

module.exports = ({config, env}) = > {
  const port = 8003
  const projectName = 'projectName'
  const publicPath = `http://localhost:${port}/ `
  config.plugin('mf').tap(args= > {
    args[0] = {
      ...args[0],
      ...{
        // Project name
        name: projectName,
        // Expose the project's global variable name
        library: {type: 'var'.name: projectName},
        // The name of the file to be imported remotely
        filename: 'emp.js'.// Remote project alias: the name of the project imported remotely
        remotes: {
          '@emp/react-base': 'empReactBase',},// Something to expose
        exposes: {
          // Alias: component path, for example:
          //'./configs/index': 'src/configs/index',
        },
        shared: {... dependencies}, }, }return args
  })
  config.output.publicPath(publicPath)
  config.devServer.port(port)
  config.plugin('html').tap(args= > {
    args[0] = {
      ...args[0],
      ...{
        files: {
          js: ['http://localhost:8001/emp.js'],}}},return args
  })
}
Copy the code

3. Add the import file

Next, you can add the entry files bootstrap. TSX and index.ts to the SRC directory.

The contents of the index.ts file are as follows:

import('./bootstrap')
Copy the code

The contents of bootstrap. TSX are as follows:

import React from 'react'
import ReactDOM from 'react-dom'
import App from 'src/view/index' // Import file of the original project
ReactDOM.render(<App />.document.getElementById('emp-root'))
Copy the code

4. Use shared resources

Next, we can reference the remote component in our project:

import HelloDEMO from '@emp/react-base/components/Demo'
const App = () = > (
  <>
    <HelloDEMO />
  </>
)
export default App
Copy the code

The last

In practice, we may encounter the following minor problems:

1. If the @ alias is used in the project, you need to add the following code to emp-config.js

  config.resolve.alias
    .set(The '@', path.resolve('/'.'src'))
Copy the code

2. There is no node core module by default in webpack5, if you use these core libraries. You need to add these core libraries in emp-config.js as follows:

  config.resolve.alias
    .set('zlib'."browserify-zlib")
    .set('assert'."assert")
    .set('buffer'."buffer")
    .set('util'."util")
    .set('stream'."stream-browserify")
    .set('timers'."timers-browserify")
Copy the code

Finally, the EMP micro front end is not limited to React projects. Vue projects can be quickly enabled and plugged in, and even Cocos games can use the EMP micro front end seamlessly. EMP micro-front-end has been applied in 80% of our internal large projects. With robustness, flexibility and reliability, it is a very suitable micro-front-end framework for children who want to learn and use micro-front-end. Welcome to learn and communicate with us on EMP Github