《可视化搭建系统》“星空” cli 脚手架端（四）

本篇聊一下星空脚手架端，做的一些事情。先回顾一下在《可视化搭建系统》“星空”整体架构（一）中的这张图。

从图中可以发现，其实脚手架核心就做了两件事，提供物料开发模板及发布模板打包后的产物。基于两件事展开，就是本篇所要分享的。

• 提供物料开发模板
  • 模板如何设计
• 发布模板打包后的产物至 nginx
  • node cli 端如何上传产物至 node server 端
  • 首次发布跟非首次发布的区别

提供物料开发模板

模板如何设计

第一步

首先明确的是模板是提供给前端开发者使用的，开发者基于此模板进行物料的开发。

因此，模板可以提供 react/vue 的本地开发环境，当然也可以提供 angular 或其他前端框架的模板，具体可以参考《可视化搭建系统》“星空” webcomponents 从0到1（二），模板框架不受限制。

模板基于 vite，比如基于 @vitejs/plugin-react 插件，可以迅速启动一个 react 的本地开发环境。

第二步

物料开发之后，最终是需要提供给运营，在运营平台对物料进行选择，以及自定义物料的数据。

因此，模板在设计时候，需要提供一个口子，暴露出物料可供运营配置的数据结构。最终呈现给运营的其实就是一个表单。如下:

其中 props 跟 schema 字段用来表述表单结构，其它字段标识物料的一些基础信息。

第三步

在本地开发好、调试好物料后，需要对其进行打包。这里选择 vite 打包成 esm。（这里指的是最终产物是 esm，比如在开发时，引入了三方库 uuid，最终在 material.js 这个 esm 中，uuid 相关会被打包进去）

比如，react 模板完整的 vite 配置如下:

发布模板打包后的产物至 nginx

node cli 端如何上传打包产物至 node server 端

node server 端

node server 端提供一个产物上传的接口，将接收到的产物，写入 nginx 静态服务下即可。如下:

node cli 端

cli 端通过 server 端提供的上传接口，基于 FormData 对其进行调用。

cli 端接口调用，使用 node-fetch。对于文件上传，区别于普通接口调用就两点:

• body 直接是 FormData
• Content-Type 通过 FormData.getHeaders['content-type'] 获取

其中，esmform/cssform 会直接透传给 node-fetch body; esmFormHeaders/cssFormHeaders 透传给 node-fetch 的 Content-Type 使用。

发布

server 端表设计及接口部分可参考《可视化搭建系统》“星空” nodejs server 端（三）

首次发布

• module 表新增一条数据，返回 module_id，写入 module package.json，作为此物料的唯一标识
• module_version 表新增配置数据，用于记录物料的版本号
• 上传打包后的产物至 nginx

如何将唯一标识写入 package.json 呢? 简单封装个方法即可

export const setJson = (filePath: string, obj: Record<string, unknown>) => {
  return new Promise((resolve) => {
    // 获取 package.json 数据
    const data = readFileSync(filePath).toString();
    const json = JSON.parse(data);
    // 写入新数据
    Object.keys(obj).forEach((key) => {
      json[key] = obj[key];
    });
    writeFileSync(filePath, JSON.stringify(json, null, "\t"), "utf-8");
    resolve(true);
  });
};

假如在其它项目下（非物料），执行了 cli 发布命令，岂不是会上传错误的静态资源至 nginx?

这里可以给 package.json name 加唯一的前缀标识，保证发布环境无误。

非首次发布

• module 表根据 module_id 更新数据
  • module_id 此时可以直接从 package.json name 获取到
• module_version 表新增配置数据
  • 相当于升级物料版本
• 上传打包后的产物至 nginx

小结

本篇简单介绍了星空 cli 端的模版设计，以及如何将开发好的物料，推送至 nginx 物料静态服务。

“星空”已完成的历史系列

• 《可视化搭建系统》“星空”整体架构（一）
• 《可视化搭建系统》“星空” webcomponents 从0到1（二)
• 《可视化搭建系统》“星空” nodejs server 端（三）

“星空”后续系列

• “星空”搭建后台实现 (五)
• docker、nginx 环境详解(六)
• “星空”代码开源，本地启动流程详解(七)