Recall from the previous post:

Micro-front-end Landing: Systemjs Modular Solutions

Single-spa Micro front-end framework:

zh-hans.single-spa.js.org/

Single-spath: single-spa.js.org/ is a framework that implements a microfront-end architecture. There are three types of microfront-end applications in the single-SPA framework:

Single-spa-application/parcel: a micro application in a micro front-end architecture, using vue, React, Angular, etc.

2. Single-spa root config: Create micro front-end container application.

3. Utility Modules: Public module applications, non-rendering components used for micro applications that share javascript logic across applications.

Creating a container application

Install single-SPA scaffolding tools: NPM [email protected] -g

Create a micro front-end container application: create-single-SPA

1. Fill in Container for the application folder

2. Select single-SPA root Config for the application

3. Enter Study for organization name

The organization name can be understood as the team name. The micro front-end architecture allows multiple teams to develop applications together, and the organization name identifies which team is developing the application.

Application names are named @ organization name/application name, such as @study/todos.

4. Start the application: CD./singletest && NPM start

5. Access the application: localhost:9000

Container default code parsing

src/xx-root-config.js

index.ejs

(1) Create a React microapplication

1. Create the React microapplication

To create an application: create-single-spa, note the organization and project name.

1. Enter todos for application directory

2. Select React

Modify the application port && to start the application

Start the application: NPM start

2. Register your app

Register the React project entry file with the base application (container application)

\ container \ SRC \ study – root – config. Js:

Specify the reference address of the micro front-end application module:

(Can directly access the corresponding application server, there is a prompt URL loading address)

By default, react and react-dom are not packaged by Webpack. Single-spa considers them public libraries and should not be packaged separately.

Modify the default application code to display application content on an independent page

container\src\study-root-config.js

3. Specify the application rendering location

micro\container\src\index.ejs

micro\todos\src\study-todos.js

React application code parsing

micro\todos\src\study-todos.js

React Micro front-end routing configuration

Prepare two routing components

Micro \ todos \ SRC \ home js & including \ todos \ SRC \ about js

micro\todos\src\root.component.js

The routing file has been introduced in the public module, \ Micro \container\ SRC \index.ejs

Modify the webpack configuration file to exclude routing module packaging, micro\todos\webpack.config.js

(2) Create vUe-based microapplications

1. Create an application

Create an app: create-single-SPA

1. Fill in RealWorld in the project folder

2. Select Vue as the framework

3. Generate Vue 2 project

Vue && Vue-Router needs to be packaged by a public module, so it needs to be configured not to be packaged within the application

micro\realworld\vue.config.js

Modify the project startup command: micro\ realWorld \package.json

Register application: micro\container\ SRC \study-root-config.js

micro\container\src\index.ejs

Load vue && Vue-router

Import an application. The application address can be obtained from a browser prompt after you directly access the application.

2. Apply route configuration

\micro\realworld\src\main.js

micro\realworld\src\App.vue

Create Utility Modules

1. Utility independent application creation

Used to place JavaScript logic shared across applications, it is also a standalone application that needs to be built and launched separately.

1. Create an app: create-single-SPA

1) Enter tools in the folder

2) Select in-Browser Utility Module (StyleGuide, API Cache, etc.)

2. Modify the port and start the application, \micro\tools\package.json

Export public method: micro\tools\ SRC \study-tools.js

Declare the application module access address in the template file: micro\container\ SRC \index.ejs

2. Use this method in React applications

MicroFrontends\micro\todos\src\about.js

3. Use this method in Vue applications

micro\realworld\src\main.js

micro\realworld\src\components\Foo.vue

Module federation implements microapplications

1. React

Base application code installation

Basic code:

2. Basic configuration webpack.config.js

Package. json startup command:

3. Export microapplications

4. Import the application module

Used in components

5. Modules federally implement Vue3.0 micro-front-end architecture

Modulefederationvue3: Example of Vue3.0 micro-front-end architecture based on modulefederation implementation (gitee.com)

Address: gitee.com/xilinglaosh…

package.json

1) Export the module in the Home application

home\webpack.config.js

2) Import in the Layout application

layout\webpack.config.js

layout\src\views\About.vue

After writing the basic code and corresponding configuration, start the two application projects of Home and Layout respectively, you can see the content of the User component in the Home application in the About of layout application.