Single-Spa构建第一个微前端项目
微前端是前端web开发的趋势。微服务允许你将后端分解成更小的部分,受此启发,微前端允许你独立构建、测试和部署前端应用。根据你选择的微前端框架,你甚至可以让多个微前端应用——用React、Angular、Vue或其他工具编写的——在同一个大应用中无扰共存!之前在这里《认识微前端:一种用于前端 Web 开发的微服务》大概介绍了一下。
在本文中,将使用 single-spa 开发一个由微前端组成的应用程序,将使用 Travis CI 设置持续集成。每个CI管道将为微前端应用绑定JavaScript,最后,我们将对其中一个微前端应用程序进行更新,看看它如何独立于其他微前端应用程序部署到生产环境中。
概述
在讨论步骤之前,先来快速了解一下演示应用程序的组成部分,这个应用程序由四个子应用程序组成:
- 一个容器应用程序,作为主要容器,协调微前端应用程序的安装和卸载
- 始终显示在页面上的微前端导航栏应用程序
- 一个微前端
account
应用程序,只有活跃时才显示 - 一个微前端
products
应用程序,也只显示当活跃
这四个应用程序都位于单独的代码仓库中,可在 GitHub 上找到。
就用户界面而言,最终的结果相当简单,但要清楚的是,用户界面并不是这里的重点。如果您是在自己的机器上学习,那么在本文结束时,您也将拥有开始使用自己的微前端应用程序所需的所有底层基础设施!
在项目开始之前,先创建一个目录来存放所有微前端应用,执行一下命令:
mkdir crayon-micro-apps
创建容器应用
按照以下步骤创建容器应用程序(也称为根配置),作为所有微前端的应用的入口:
cd crayon-micro-apps mkdir crayon-micro-root cd crayon-micro-root npm init
按照 CLI 步骤输入相应的信息,本文示例不使用Single-Spa
推荐的root-config
方式。接下来安装serve
,执行下面命令:
npm install serve --save
安装完成之后,打开 package.json
增加启动脚本:
"serve": "serve -s -l 9010"
在项目根目录新建文件index.html
,代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Crayon Vue Microfrontends</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="importmap-type" content="systemjs-importmap" /> <script type="systemjs-importmap"> { "imports": { "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js", "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js", "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@3.0.7/dist/vue-router.min.js" } } </script> <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js" as="script" crossorigin="anonymous" /> <link rel="preload" href="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js" as="script" crossorigin="anonymous" /> <script src="https://unpkg.com/import-map-overrides@2.3.3/dist/import-map-overrides.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/system.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/amd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-exports.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-register.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/use-default.min.js"></script> </head> <body> <import-map-overrides-full show-when-local-storage="overrides-ui" ></import-map-overrides-full> </body> </html>
创建微前端的App
接下来将使用CLI工具 create-single-spa
来创建微前端的应用,具体安装介绍可以查看官方文档。
按照上面的步骤来创建导航栏微前端应用,命名为 crayon-micro-navbar
。
mkdir crayon-micro-navbar cd crayon-micro-navbar create-single-spa
按照CLI提示进行操作:
- 选择
single-spa application / parcel
- 选择
vue
- 输入组织名称
crayon
按照同样方式创建 crayon-micro-account
和 crayon-micro-products
。
创建crayon-micro-account
使用vue3
,创建crayon-micro-products
使用vue2
。
完成之后,稍微调整一下启动信息,主要是配置端口、降低vue-cli-plugin-single-spa
版本为^1.3.2
,增加依赖"systemjs-webpack-interop": "^2.3.7"
,修改文件 package.json
:
"serve": "vue-cli-service serve --port 9011",
crayon-micro-navbar
:9011
crayon-micro-account
:9012
crayon-micro-products
:9013
由于修改了依赖库的版本,需要重新执行
npm install
。
先进入项目目录crayon-micro-navbar/src
,增加文件 set-public-path.js
,代码如下:
import { setPublicPath } from "systemjs-webpack-interop"; setPublicPath("crayon-navbar");
将上述文件在 main.js
头部导入:
import "./set-public-path";
接下来修改crayon-micro-navbar/account
,如下:
import { setPublicPath } from "systemjs-webpack-interop"; setPublicPath("crayon-account");
crayon-micro-navbar/products
,如下:
import { setPublicPath } from "systemjs-webpack-interop"; setPublicPath("crayon-products");
向容器应用注册微前端应用
每个应用程序都包含自己的启动脚本,这意味着在本地开发期间,每个应用程序都将在自己的开发服务器上本地运行。如上所见,导航栏应用程序在端口90011
上,account
应用程序在端口9012
上,products
应用程序在端口9013
上。
打开文件 crayon-micro-root/index.html
,注册三个应用:
<script type="systemjs-importmap"> { "imports": { "crayon-navbar": "http://localhost:9011/js/app.js", "crayon-account": "http://localhost:9012/js/app.js", "crayon-products": "http://localhost:9013/js/app.js", "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js", "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js", "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@3.0.7/dist/vue-router.min.js" } } </script>
<script> (function () { Promise.all([ System.import("single-spa"), System.import("vue"), System.import("vue-router"), ]).then(function ([singleSpa, Vue, VueRouter]) { Vue.use(VueRouter); singleSpa.registerApplication( "crayon-navbar", () => System.import("crayon-navbar"), (location) => true ); singleSpa.registerApplication( "crayon-account", () => System.import("crayon-account"), (location) => location.pathname.startsWith("/account") ); singleSpa.registerApplication( "crayon-products", () => System.import("crayon-products"), (location) => location.pathname.startsWith("/products") ); singleSpa.start(); }); })(); </script>
本地运行
为了更好的查看效果,为每个微前端应用增加简单的UI,在这里就不介绍了。打开四个终端,执行相应的APP,打开浏览器输入:http://localhost:9010/
,可以看到下面的效果:
总结
本文设计的代码仓库地址:https://github.com/QuintionTang/crayon-micro-apps,这只是完成了一个简单的实现,如需要在团队实际落地还需要规划一些开发规范和工具。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
从 DAS 开始了解 CKB 应用开发(二):善用 Keeper
在上一篇文章《一、如何保证 DAS 账户的唯一性》中的最后,我们提到了仍然存在的 Cell 竞争问题。具体问题如下: 假定链上已经注册有 a.bit、b.bit、z.bit 三个账户,现在有两个用户分别想要注册 c.bit,d.bit,且注册时间很靠近。按照规则,注册发生时,他们使用的注册服务会分别构造交易让用户签名,交易的内容为将要注册的账户插入到 b.bit 之后。 问题在于,两笔交易都会试图将 AccountCell(b.bit) 消费掉,而一个 Live Cell 只能被消费一次,那么就会导致必然其中一笔交易会失败。假定注册 c.bit 的交易成功了,而注册 d.bit 的交易失败了。注册 d.bit 的用户不得不被他所使用的注册服务要求重新签名交易。这是由于注册 d.bit 时,原本需要将 AccountCell(b.bit) 消费掉,而现在需要改为消费 AccountCell(c.bit),交易结构内容发生了变化,必须重新签名。 这将导致非常糟糕的用户体验。事实上,当注册的用户数量变多时,大部分用户不得不一次又一次的签名交易,直到他能注册成功。 <br/> 澄清...
- 下一篇
Linux内核睡眠唤醒调试
本文基于RockPI 4A单板Debian系统Linux4.4内核介绍下睡眠唤醒(suspend/resume)的一些调试方法。 一、参数设置 1、关闭串口睡眠 在Linux内核睡眠过程中,会先调用suspend_console()函数使串口进入睡眠状态,这样会导致后续设备驱动的睡眠过程不可见。可以在boot启动参数中增加no_console_suspend参数,显示设备驱动睡眠日志。 ## 启动参数中增加no_console_suspend root@linaro-alip:~# cat /boot/extlinux/extlinux.conf timeout 10 menu title select kernel .... label kernel-debug kernel /debug/Image fdt /debug/rk3399-rock-pi-4a.dtb append earlyprintk console=ttyFIQ0,1500000n8 init=/sbin/init ... rootfstype=ext4 no_console_su...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2全家桶,快速入门学习开发网站教程
- Hadoop3单机部署,实现最简伪集群
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- CentOS关闭SELinux安全模块
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS8安装Docker,最新的服务器搭配容器使用