分类: 前端工程化

node 命令行工具

示例简单的命令行工具一般按照以下流程编写: package.json 文件中添加 bin 属性,指定命令的名称,如 “bin”: { “create-app”: “bin/create-app.js” }。 bin/create-app.js 文件中添加 #!/usr/bin/env node,指定这是一个使用 node 执行的命令行工具。 使用 commander.js 编写 bin/crea

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 格式编写。

webpack-dev-server 一些设计点

整体流程webpack-dev-server 通过 express 构建服务,以下是它的整体流程: validateOptions:使用 schema-utils 校验配置选项。 normalizeOptions:处理选项,混入默认配置。 updateCompiler:酌情为 webpack 添加 HotModuleReplacementPlugin 插件,socket 通信客户端脚本。 将选项

webpack加载器编程

原理loader 是导出为函数的 js 模块,它支持同步模式、异步模式。同步模式有两种编程方式,其一使用 return 返回结果作为下一个加载器的资源,其二使用 this.callback 传入结果。异步模式使用 this.async 开启,在 this.async 执行过程中再调用 this.callback 语句,以启用下一个加载器的执行逻辑。官方推荐使用异步模式,这样可以提升 webpack

前端代码检查及美化

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