背景

我们做的大量都是后台管理系统，对于这种系统，我们会发现，里面的业务其实相当单一

大量都是类似这种， 搜索条件，表格，分页

每个页面都要处理上下翻页，搜索，mounted加载首页table数据等等逻辑

虽然不复杂，但很累。

因此，我们需要封装一些DSL来降低我们的重复工作量

啥是CompositionAPI/hook

看看文档

我们的请求经过封装，大概是这种格式

背景

element-plus中，el-select中可选项达到了500条，页面跳转销毁时导致异常卡顿（vue3.0.0版本，3.0.11版本有很大改善，建议升级）

因此需要进行分页操作。初步设想时当select中的options滚动到最底部的时候，触发加载更多，获取更多的可选项。

实现方式

打算通过指令实现，这样添加就很方便，预期一个指令

1

v-loadmore="loadMore"

搜一下

正常情况下，我们碰到的100个需求，99个都已经有人实现过了，所以我们就只需要搜一哈，就能找到答案。

果不其然，答案异常的多，只不过都是element-ui的，不过改动不多，应该问题不大，让我们来试一试。

记录一些我碰到的入门问题

1.如何创建ts项目

1

npx create-react-app app-name --template typescript

2.react+ts项目eslint如何引入

1
2
3

yarn add eslint --dev

npx eslint --init

选项如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? … 
❯ React
  Vue.js
  None of these

? Does your project use TypeScript? › No / Yes✔

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
  Node

? How would you like to define a style for your project? … 
❯ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

? Which style guide do you want to follow? … 
❯ Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google

? What format do you want your config file to be in? … (任选)
  JavaScript
  YAML
❯ JSON

? Would you like to install them now with npm? › No / Yes✔

npm下载完成以后，删掉package-lock.json，重新使用yarn去加载依赖

接着，以为已经使用airbnb规则，万事大吉

但是你会发现特别多奇奇怪怪的错误，比如

部署也是根据不同的路由模式进行不同情况部署

假设主应用和子应用使用相同模式的路由

不是说使用不同路由不行，而是没那个必要去增加复杂性

我们以本机模拟服务器部署情况

如上图，我打包好了两份代码，分别位于deploy和deployhash文件夹

deploy文件夹内放置的是history模式的产物

deployhash文件夹内放置的是hash模式的产物

两个文件夹内的文件结构是一模一样的，这个图我们叫它图1，等哈记得回头来看

一、背景

开发环境可以利用控制台调试，看网络请求啊乱七八糟的。但是打包以后就没办法看了。

二、解决这个问题

其实主要打开控制台的关键语句就是

1

window.webContents.openDevTools()

那我们需要设置一个不常用的快捷键，避免误触来打开控制台

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import {globalShortcut} from 'electron';
// 快捷键注册
function registryShortcut() {
  globalShortcut.register('CommandOrControl+J+K', () => {
    // 获取当前窗口
    BrowserWindow.getFocusedWindow().webContents.openDevTools();
  });
}

app.whenReady().then(() => {
  // 注册快捷键
  if (!isDevelopment) {
    registryShortcut();
  }
});

app.on('will-quit', () => {
  globalShortcut.unregisterAll();
});

即可

背景

在开发过程中，偶尔会遇到一些问题，需要通过修改三方库才能解决。

一般遇到这种情况，我们会采取以下方式解决：

1.fork一份并修改，package.json指向fork的地址。

2.写一个shell脚本，在拉完包后执行脚本替换。

第一个方法太重了，并且在主库的更新合并上比较麻烦，需要手动去合并。

第二个方法需要写shell脚本，投入产出比不高，还经常忘记执行。

但自从发现了如下方法，临时修改npm包再也不是事了

使用patch-package和postinstall-postinstall

1.集成

Vue3的router问题

其实严格来说，这不是qiankun的问题，是vue-router4.x的问题。

解决方案：history模式使用window.history跳转，hash模式主应用添加hashchange事件发送

详情见issues1280

旧的jq项目改造，发现属性和方法丢失

子应用包含多个script，其中有些是公共方法，其他js使用的时候提示找不到方法

解决方案：需要显式挂载到window

详情见issues1272

qiankun添加的div撑不满外部盒子

使用css选择器为qiankun添加的div加样式

这个方式其实是我在上家公司的时候体验过，觉得确实很有意思。

所以这里来逆推一下实现方式。

解决了什么痛点

1.开发一个模块，需要启动2-3个项目

在微前端的开发过程中，如果我们要在主应用中看效果，我们至少需要启动一个主应用，和一个待开发模块，如果项目具有登陆机制，我们还需要启动一个登陆模块。

换句话说，为了开发一个模块，我们需要至少启动三个项目。

2.数据耦合的情况下，无法单独启动项目调试

3.特定环境下出现的bug

可能某些bug依赖特定的数据，在测试环境出现了但在本地运行或开发环境运行正常。

如何解决

微前端改造

这里以Vue3为例子，主应用和子应用均使用vue3

路由的话，建议主应用和子应用使用相同模式，即均为history或者均为hash

以下先使用为history模式讲解，最后会写如何使用hash模式。

History模式

主应用改造

一般情况下，我们会将带导航的layout的部分，直接放在主应用中。当然不是说不能拆，是能拆的，因为导航的layout明显是个路由不敏感部分，完全可以拆解为单独的子应用。

1.添加qiankun

1

yarn add qiankun

微前端是什么

我觉得没有什么说的必要，可以百度到

微前端能解决什么

也没有什么必要赘述

微前端能为我们带来什么

不被时间所淘汰的技术选型！！！

微前端的核心价值

选型开始

备选库

SingleSpa:可以说“万物基于SingleSpa”，当前流行的大量框架其实是SingleSpa的上层封装。