EMP Micro Front End Sharing Content Review (Middle)

Our team shared the EMP micro front-end in the live broadcast room of station B, which is rich in content and divided into three articles. Welcome to pay attention to the follow-up of EMP library. This article focuses on the ecological construction and use experience of EMP.

Following the previous

EMP Micro Front-end Sharing Content Review (PART 1)

Ecological building

As can be seen from the above figure, the bottom is the EMP ecosystem, which mainly includes EMP-CLI scaffolding, format specification plug-ins, TS auxiliary plug-ins, etc. More scenarios and plug-ins are improved in the following. It is recommended that you can learn from the EMP library demo examples:

Github.com/efoxTeam/em…

Based on the ecology of these scaffolds, there is also a certain skill in the design of the upper floors. The recommended way of use is to build an application base station, and the shared resources (components, modules, methods, etc.) of multiple projects can be placed inside the base station. These shared resources can be maintained by several specialized people to ensure stability and reliability. Other business projects, such as APP1 and APP2 in the figure, can use base station resources.

In addition, in fact, APP1 and APP2 projects directly, but also can carry out resource sharing.

Here is a list of the main scaffolding tools and plug-ins for the EMP ecosystem :(more on that later)

Lerna is used to manage the EMP-CLI scaffolding in efoxTeam/ EMP library. This management mode is quite clear, and multiple projects can be executed in parallel in a project.

@efox/emp- CLI scaffolding is an important part of it. As can be seen from the figure above, emP is currently implemented based on WebPack5, using the chain feature of Webpack, reading configuration from the emp.config.js file of the global project to execute dev, build and other commands. You can see that the command emp TSC updates the remote D.ts declaration file, which is also the TS specification mentioned below:

Using TS actually brings many of the benefits shown above, which are friendly to a team’s specification. So the EMP recommends that you use TS.

Using TS as shown in the figure above, in a business project, as long as the emP synchronization remote declaration file (EMP TSC) command is executed, you can import components, the component needs to know what parameters, what parameters return.

The EMP scaffolding command, with the help of the emp-Yune-dts-Plugin, synchronizes declaration files between multiple projects to improve team collaboration.

Experience with

First, we can have a simple demo experience. Emp init creates a react-base project and a react-project.

The react-base and react-project projects both have a configuration file named emp-config.js.

We take a closer look at the contents of the emp-config.js configuration file. In webpack chain, the MF plug-in is used, and the main fields are shown in the figure.