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.