初步认识微前端（single-spa 和 qiankun）

初步认识微前端

微前端是什么

现在的前端应用，功能、交互日益复杂，若只由一个团队负责，随着时间的推进，会越来越庞大，愈发难以维护。

微前端这个名词，第一次提出是在2016年底。它将微服务（将单一应用程序划分成一组小的服务，服务之间相同配合，为用户提供最终价值）这个应用于服务端的技术扩展到前端领域。

微前端背后的想法是：将网站或 web 应用程序视为由独立团队负责的子应用（或模块、功能）的组合。

微前端核心是：拆、和。

拆，即将一个应用拆成多个子应用。每个子应用由单独的团队负责，独立开发、发布
和，将多个子应用整合成完整的 web 应用。

微前端框架

微前端框架有：single-spa、qiankun。

由于 qiankun 基于 single-spa，所以我们先介绍 single-spa。

single-spa

Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架 —— 官网

实战

single-spa 能将多个单页面应用聚合成一个整体应用，所以我将创建一个 vue的应用、一个 react 的应用，再将这两个应用整合成一个应用。

下面我们将使用 cli 创建三个项目，vue 子应用、react 子应用和父应用（或完整应用），实现一个微前端架构系统。

cli（create-single-spa）

vue 提供了 cli，用于快速开始 vue 的编写；single-spa 也提供了自己的 cli，即 create-single-spa

全局安装 cli：

>npm i create-single-spa -g

added 387 packages, and audited 388 packages in 40s

50 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

下面只使用 cli 其中的一种语法来创建三个项目：即create-single-spa my-dir。用法如下：

>create-single-spa single-spa-project
? Select type to generate
  single-spa application / parcel
  in-browser utility module (styleguide, api cache, etc) 
> single-spa root config

选项说明：

single-spa application 子应用
parcel 一个parcel可以大到一个应用，也可以小至一个组件
in-browser utility module 浏览器内实用模块
single-spa root config single-spa 根配置。可以创建父应用，用于整合子应用。

使用 cli 创建父应用

使用 cli 创建父项目。选择 single-spa root config:

single-spa-test> create-single-spa single-spa-project
// single-spa root config
? Select type to generate single-spa root config
// 选择 npm
? Which package manager do you want to use? npm
// 不使用 Typescript
? Will this project use Typescript? No
// 不需要 single-spa Layout 引擎
? Would you like to use single-spa Layout Engine No
// 组织输入 pjl
? Organization name (can use letters, numbers, dash or underscore) pjl
...
Project setup complete!
Run 'npm start' to boot up your single-spa root config

注：后面两个子应用的组织也输入 pjl，说明这三个项目都属于 pjl。

配置文件如下:

// single-spa-project/package.json
{
  "name": "@pjl/root-config",
  "scripts": {
    "start": "webpack serve --port 9000 --env isLocal",
    ...
  },
  ...
  "dependencies": {
    ...
    "single-spa": "^5.9.3"
  }
}

通过 npm run start 启动项目：

single-spa-project>npm run start

> start
> webpack serve --port 9000 --env isLocal

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9000/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.102:9000/
...
webpack 5.68.0 compiled successfully in 5151 ms

根据提示访问项目（http://localhost:9000/），浏览器输出（中文注释由笔者添加）：

// 欢迎来到你的 single-spa 根配置。说明项目启动成功，并能正常访问
Welcome
to your single-spa root config!