泛微Ecology 9代码块开发框架：初步实现

目标

开发框架的初版仅实现以下最基本的特性：

版本管理。
规范化目录结构。
基本构建功能：将CSS和JS源文件合并在一起构建为成品JS文件。
可通过Web访问本地的成品JS文件。

技术选型

Git：实现版本管理。
JavaScript语言：开发框架使用JS编写，与业务代码的编程语言保持一致。
Node.js：开发框架运行在Node.js环境上，因为涉及文件操作。
NPM：管理三方库的依赖。
nginx：实现Web服务器（实现初版开发框架时，我还没想到内置Web服务器）。

实现

1. 版本管理

建立Git仓库。

业务上各个功能独立演进，因此不做版本号管理。

2. 规范化目录结构

package.json（NPM项目配置文件）
index.js（构建程序，是开发框架的核心）
template.js（构建所需的模板JS代码文件）
src/（业务代码目录）
- 流程布局/（存放用于流程布局的代码块的业务代码）
  - 流程名称/（存放指定流程的业务代码）
    - 功能名称/（存放指定功能的业务代码，通常功能名称中说明适用于哪个/哪些流程节点）
      - index.js（业务代码的JS源文件，必须有，一个目录中有index.js，就说明要将该目录构建为成品JS文件）
      - index.css（业务代码的CSS源文件，可有可无）
- 建模布局/（存放用于建模布局的代码块的业务代码）
  - 模块名称/（存放指定模块的业务代码）
    - 功能名称/
      - index.js
      - index.css
- 建模查询/（存放用于建模查询的代码块的业务代码）
  - 模块名称/（存放指定模块的业务代码。建模查询通常隶属于建模模块，且一个功能通常在同属于一个模块的多个查询中复用，因此通常按模块组织目录。）
    - 功能名称/
      - index.js
      - index.css
dist/（成品JS文件输出目录，src/A/B/C/（有index.js）将会构建为dist/A/B/C.js。Git忽略此目录。）

在src/中，流程布局/、建模布局/、建模查询/这3个子目录是固定的，因为OA系统中只有这3个地方可以写代码块。但它们下面的目录结构是不固定的，上述结构只是一个参考，具体要按实际情况合理划分。

为了方便叙述，我们做如下定义：

脚本文件：dist/中的成品JS文件。由脚本目录构建得到，最终会作为一个独立的脚本部署到OA系统中。注意与JS文件区分。
脚本目录：src/中任意层级的包含index.js的目录。有index.js就说明要将该目录构建为一个脚本文件。
JS源文件：脚本目录中的JS源文件。注意与脚本文件区分。
CSS源文件：脚本目录中的CSS源文件。

3. 基本构建功能

模板

template.js：封装jQuery.ready回调（OA系统给的规范）、作用域隔离（通过IIFE（立即调用函数表达式）实现）、设置CSS等基础代码，并预留CSS和JS的占位符。代码如下：

jQuery(document).ready(function () {
    // 设置CSS
    (function () {
        let css = `/*[[CSS]]*/`;
        css = css.trim();
        if (css) {
            let style = document.createElement("style");
            style.innerHTML = css;
            document.head.append(style);
        }
    })();

    // 执行JS
    (function () {
        /*[[JS]]*/
    })();
});

构建程序

index.js（构建程序）：

删除dist/。
递归遍历src/中的每个目录，如果目录中有index.js，则为脚本目录，需要构建。
1. 读取index.js，得到JS代码。
2. 如果index.css存在，则读取之，得到CSS代码，否则CSS代码为空。
3. 读取template.js，得到模板代码。
4. 用JS代码、CSS代码分别替换模板代码中的JS占位符、CSS占位符，得到脚本文件代码。
5. 根据src/A/B/C/→dist/A/B/C.js的对应规则，得到脚本文件的路径。
6. 将脚本文件代码输出为脚本文件。

启动命令

在package.json中配置：

"scripts": {
    "build": "node index.js"
}

那么，在编写完业务代码后，就可以运行如下命令将整个src/构建为dist/：

npm run build

4. 通过Web访问

使用nginx做静态Web服务器，配置如下：

server {
    listen 8000;
    server_name localhost;
    root "<项目目录>/dist";
    charset utf-8;
}

启动nginx后，即可通过形如http://localhost:8000/流程布局/流程名称/功能名称.js的URL访问脚本文件。