分类: 前端工程化

umi 运行时插件

运行原理runtimePlugin 运行时插件也遵循先注册、后使用的流程。运行时插件表现为数组形式,数组项为运行时插件的导出对象。导出对象中的属性可以是函数、或对象、返回对象的 Promise(前者可称为执行类导出,后两者可称为配置类导出,因其用于获取配置项)。umi 包中的 runtimePlugin.js 提供了如下方法: plugins:运行时插件集合。 validKeys:校验 key

umi-plugin-qiankun

umi-plugin-qiankun 基于 qiankun,允许在 umi 环境中创建微服务。 按官方示例,搭建 umi 微服务可基于以下流程实现: 主应用 .umirc.js 添加 @umijs/plugin-qiankun 插件配置 master 内容:注册子应用(应用名、html 地址、路由前缀、路由方式、挂载节点、自定义属性等)、启动沙箱、启动预加载、启动异步渲染等。(备注:子应用也可以

umi 插件钩子机制(修正版)

plugin hook 插件钩子在 umi 内部的表现一为 method 方法,一为 hook 钩子。简单而论,插件钩子运作机制分为两步:register 注册插件钩子、apply 执行插件钩子。插件钩子按 name 命名存入 pluginHooks[name] 中,执行期间以 reduce 机制依次执行并控制入参。以下为 umi 源码注册插件钩子、执行插件钩子的底层方法: register(h

jest测试

jest 断言库 支持两种测试模式:功能测试、快照测试。通过添加 babel-jest 依赖以及 babel.config.js 配置,可以在工程中使用 babel 转译 es6 语法或者 ts 语法,可参看 Getting Started。jest 也可以用于使用 webpack 来管理资源、 样式和编译的项目,可参看 Using with webpack。jest 支持的断言方法可参见 Exp

swagger

OpenAPI SpecificationOpenAPI 规范(OAS)为 RESTful API 定义了一套标准的、跨语言的接口,以便人类和计算机均无需通过源码、文档或网络流量检测探知和理解服务器提供的能力。OAS 可用于制作文档生成器、代码生成器、测试工具等等。OpenAPI 以 json 对象形式呈现,因此它基本遵循 json schema 规范,可以用 json 或 yaml 格式编写。

前端代码检查及美化

lintlint 检查可借助 eslint, tslint, stylelint,这里暂时不作详解。 prettierprettier 库 用于代码格式化。官方说法,prettier 的美化方案比较武断;因为它在改动代码期间并未执行 lint 检查。在使用 prettier 时,首先需要安装 prettier;然后创建 .prettierrc, .prettierignore 配置文件;最后执行

webpack动态导入

代码分割webpack 官方文档 动态导入 部分已指示我们,可使用 es 提案中的 import() 或 webpack 提供的 require.ensure 语法懒加载代码。我们按下 require.ensure 不表,只介绍 import()。webpack 官方所提供的示例如下: 1234567891011async function getComponent() { var e

umi中的插件和路由机制

上图是 umi 的架构图,本文聚焦于解读 umi 的插件和路由机制。umi 中的插件机制支撑了插拔式命令、嵌套插件、运行时插件、文件生成器、生命周期钩子系统等功能;路由机制用于将 src/pages 解析为路由信息,又支持配置路由、运行时动态扩展。插件和路由机制的核心源代码都由 umi-build-dev 包提供。文中所给代码均经过一定程度的删减,只保留核心代码部分。 af-webpack同大多

http-proxy-middleware 源码解读

概述http-proxy-middleware 库借助于 node-http-proxy,用于将 node 服务器接收到的请求转发到目标服务器,实现代理服务器的功能。 实现原理可以推想,使用 node-http-proxy 创建代理服务器 proxyServer 后,通过全局注册的转发规则获取到客户端请求 req 需要发送到的目标地址,再通过调用 proxyServer.web, proxySer

node-http-proxy 源码解读

概述node-http-proxy 模块用于转发 http 请求,其实现的大致原理为使用 http 或 https 模块搭建 node 代理服务器,将客户端发送的请求数据转发到目标服务器,再将响应输送到客户端。 实现整体流程同 koa 的中间件机制相仿,node-http-proxy 模块内部组装任务队列,在请求转发的过程中,将任务队列中的处理函数逐个执行。处理函数的意义通常是封装消息头,当然,最