Project source code address:

https://github.com/wuxiaohuaer/webpack5-vue-admin
Copy the code

What is a micro front end

Micro front-end is a macro concept, its core is independent, independent development, independent deployment, more suitable for large teams to carry out heavyweight project development.

According to The Website of Micro Frontends, the microfront-end concept is an extension of the microservices concept, abandoning the large monolithic approach and breaking the front-end into small, simple blocks that can be developed, tested and deployed independently while still coming together as a single product to the customer. It can be understood that a microfront-end is an architectural style that aggregates several small, independently deliverable front-end applications into one whole.

Second, why use micro front end?

A company with multiple similar projects may share a dialog component that can be encapsulated so that other projects can use it together.

At this time we will have a question, directly packaged on the NPM is not finished, why use micro front-end so complex things? We packaged the common components and uploaded them to the NPM package manager, which can be used with other projects in the company, but with two drawbacks.

1. Cumbersome procedures

Develop three management background application projects and separate the same business submodule into NPM package. At this time, if the logic of the business submodule needs to be updated, the following flow operations need to be done:

Update the NPM package version Update the NPM package version of A Management system application Publish and deploy A Management system application Apply to management systems B and C in cycles 2 and 3Copy the code

Because although it is relatively independent, with such a middleman as NPM, but to change a component, all the projects have to touch.

If we use microservices, we can put all the common components into a container application, which is dedicated to the components, and when we need to update the container application, we can simply redeploy the container application and refresh the other projects to get the latest modules.

2. Slow build speed

If there are n components in a project that need to be updated from NPM, and all of them need to be packaged when they are built and deployed, the development experience will get worse and worse.

Microservices do not require the code to build these submodules locally, reducing build volume and improving development efficiency.

Third, micro front-end implementation scheme

Currently the industry’s most fire micro front-end solutions should be ant team maintenance qiankun: qiankun.umijs.org/zh/guide

If you are interested, you can go to the official website

I haven’t developed a very large number of systems myself, so I don’t have much interest in microservices. Webpack5 has a federated module function (mf), which is a better solution for the micro front-end public dependency loading.

In view of the ability of mf, we can fully realize the application of a decentralized deployment group: deploy each application is individually in separate servers, each application can refer to other applications, can also be reference by other applications, each application can serve as the role of the host, also can be used as a remote, no center application concept.

At present, the mature micro front-end architecture based on MF is the EMP micro front-end scheme of YY team

Github.com/efoxTeam/em…

As a vue dog, I implemented a basic microservice based on the latest vue3.0+webpack5.

Fourth, build the environment

1. Create a folder

// create folder mkdir hand-vue3-project && CD hand-vue3-project // initialize project NPM init-yCopy the code

2. Install dependencies

yarn add webpack webpack-cli -D
Copy the code

3. Create a file

Create SRC, index.html, and webpack.config.js in the root directory, and main.js in the SRC folder

4. Configure webpack.config.js

// webpack.config.js const path = require('path') module.exports = {mode: 'development', // environment mode entry: Path.resolve (__dirname, './ SRC /main.js'), // output: {path: path.resolve(__dirname, 'dist'), // Export filename: 'js/[name].js' // packaged static resource filename}}Copy the code

Add the following to the scripts property of package.json:

"dev": "webpack --config ./webpack.config.js"
Copy the code

Do some basic packaging configuration first, then add vUE

5. Operating environment

Print it in main.js

console.log('hello,world! ')Copy the code

Run the command:

yarn dev
Copy the code

At this point you can see that there is a packed JS file in the dist folder

V. Introduction of Vue3.0

The company didn’t dare to use vue3. X for its projects, so it had to be a demo

Install dependencies

Yarn add vue@next -s@next-s To download the latest vue version yarn add html-webpack-plugin -d use index. HTML as the template. Type to folder yarn add vue-loader@next parse and convert.vue files, Extract the logical code script, style code style, and HTML template YARN add @vue/ compiler-SFC Vue 2.x era, The vue content is ast and vue 3.x becomes @vue/ compiler-sFC. yarn add vue-style-loader css-loaderCopy the code

Configuration items

1, webpack. Config. Js

Const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') Const {VueLoaderPlugin} = require('vue-loader/dist/index') module.exports = {mode: exports 'development', entry: path.resolve(__dirname, './src/main.js'), output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name].js' }, module: { rules: [ { test: /\.vue$/, use: [ 'vue-loader' ] }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, './index.html'), filename: 'index.html', title: 'VueLoaderPlugin'), // Add VueLoaderPlugin()]}Copy the code

2, SRC file

main.js

Import {createApp} from 'vue' // vue 3.x import App from './app.vue' // Import App from App page to form const App = Mount ('#root') // Mount the page to the root nodeCopy the code

The new app. Vue

<template> <div> What is the distance to Euro 2021? </div> </template> <script> export default { } </script>Copy the code

If you run YARN dev, an index. HTML file is generated in the dist folder. If you open it, you can see the effect

The introduction of WDS

yarn add webpack-dev-server -D
Copy the code

webpack.config.js

devServer: {
  contentBase: path.resolve(__dirname, './dist'),
  port: 8080,
  publicPath: '/'
}
Copy the code

package.json

"dev": "webpack serve --progress --config ./webpack.config.js"
Copy the code

Run the yarn dev

Implement microservices using federated modules

Now we need to create some common component of project A and export it

1. Create a component

mountDown.vue

<template> <div>{{sum}} day </div> </template> <script> import {defineComponent, onMounted, ref, computed } from 'vue' export default { setup() { let sum = computed(() => parseInt((new Date('2021-06-13'.replace(/-/g, '/')).getTime() - new Date()) / (1000*3600*24))); return { sum } } } </script>Copy the code

2. Export components

webpack.config.js

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); New ModuleFederationPlugin({name: "A", // the exposed module name filename: "remoteentry. js", // the constructed filename exposes: {'./countDown': '. / SRC/components/countDown. Vue '/ / exposed out. Key, write relative path}})Copy the code

3. B Project introduction

webpack.config.js

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); New ModuleFederationPlugin({name: "B", // exposed module name filename: "remoteentry. js", // constructed filename remotes: {A: 'A' @ http://localhost:8080/remoteEntry.js/reference /}})Copy the code

app.vue

<template> <div> What is the distance to Euro 2021? </div> <countDown/> </template> import { defineAsyncComponent } from 'vue' const countDown = defineAsyncComponent(() => import('A/countDown') ) export default { components: { countDown }, setup() { return { } } }Copy the code

If the code is changed on project A, project B will also be updated in time. Different applications have the same components, so there is no need to copy and paste the same code into the code of each application, which solves the problem of code sharing across applications.

7. Basic Concepts and configurations

Some basic concepts

• With Module Federation, each application block is a separate build that is compiled as a container. • The container being applied is called remote • the reference is called host • The exposed module being used is called remote moduleCopy the code

A container, used, exposed, is a two-way street. A project can reference components from other projects or expose its own components to other projects.

The principle of

The sense principle, that’s jSONP. Create a global variable according to the module, according to the global variable to obtain the source code of different components.

Refer to the link

https://juejin.cn/post/6921161482663100423#heading-2

https://www.yuque.com/violet-coyxa/ib3u7d/etzwyg
Copy the code