vscode 外掛視覺化製作和管理腳手架及原理解析

wjkang發表於2022-03-30
VSCode視覺化

提到腳手架，大家想到的可能就是各種 xxx-cli，本文介紹的是另一種方式：以 vscode 外掛的形式實現，提供 web 視覺化操作，如下圖：

下面介紹如何安裝使用，以及實現原理。

安裝使用

vscode 安裝 lowcode 外掛，此外掛是一個效率工具，腳手架只是其中一個功能，更多功能可以檢視文件，這集只講腳手架相關的。

外掛安裝之後，開啟腳手架介面，步驟如下圖：

可以直接使用分享的腳手架，勾選選項後直接建立即可：

製作腳手架

在模板專案根目錄下建立 lowcode.scaffold.config.json 檔案，將需要做內容動態替換的檔案加上 .ejs 字尾。

ejs 語法

配置

一個完整 lowcode.scaffold.config.json 配置：

{
    "formSchema": {
        "schema": {
            "type": "object",
            "ui:displayType": "row",
            "ui:showDescIcon": true,
            "properties": {
                "port": {
                    "title": "監聽埠",
                    "type": "string",
                    "props": {},
                    "default": "3000"
                },
                "https": {
                    "title": "https",
                    "type": "boolean",
                    "ui:widget": "switch"
                },
                "lint": {
                    "title": "eslint + prettier",
                    "type": "boolean",
                    "ui:widget": "switch",
                    "default": true
                },
                "noREADME": {
                    "title": "移除README檔案",
                    "type": "boolean",
                    "ui:widget": "switch",
                    "ui:width": "100%",
                    "ui:labelWidth": 0,
                    "ui:hidden": "{{rootValue.emptyREADME === true}}",
                    "default": false
                },
                "emptyREADME": {
                    "title": "空README檔案",
                    "type": "boolean",
                    "ui:widget": "switch",
                    "ui:hidden": "{{rootValue.noREADME === true}}"
                }
            },
            "labelWidth": 120,
            "displayType": "row"
        },
        "formData": {
            "port": 3000,
            "https": false,
            "lint": true,
            "noREADME": false,
            "emptyREADME": false
        }
    },
    "excludeCompile": ["codeTemplate/", "materials/"],
    "conditionFiles": {
        "noREADME": {
            "value": true,
            "exclude": ["README.md.ejs"]
        },
        "lint": {
            "value": false,
            "exclude": [".eslintrc.js", ".prettierrc.js"]
        }
    }
}

formSchema：

formSchema.schema 為 x-render 表單設計器 匯出的的 schema，會根據 schema 構建出表單介面，formSchema.formData 為表單預設資料

建立專案的時候會將表單資料傳入 ejs 模板中進行編譯。

excludeCompile：配置不需要經過 ejs 編譯的資料夾或檔案。

conditionFiles：根據表單項的值，在建立專案的時候將某些資料夾或檔案刪除，比如：

"conditionFiles": {
    "noREADME": {
        "value": true,
        "exclude": ["README.md.ejs"]
    },
    "lint": {
        "value": false,
        "exclude": [".eslintrc.js", ".prettierrc.js"]
    }
}

當 lint 這個表單項的值為 false 的時候，配置的資料夾或檔案 ".eslintrc.js"，".prettierrc.js"，將會在建立的專案中排除掉。

本地除錯腳手架

參考模板

https://github.com/lowcode-scaffold/lowcode-mock

釋出腳手架

將腳手架提交到 git 倉庫，注意開放專案的公開訪問許可權。

使用腳手架

直接使用 git 倉庫地址

注意使用 clone 地址，支援指定分支，比如 -b master https://github.com/lowcode-scaffold/lowcode-mock.git

分享到模板列表中快速建立

修改 倉庫 中 index.json 內容，提交 pr。

實現原理

  1. 開啟 webview 的時候從 cdn 拉取記錄了腳手架列表的 json 檔案，渲染列表檢視。

  2. 點選某個腳手架，將腳手架的 git 倉庫地址傳到外掛後臺，外掛後臺根據 git 地址下載模版到臨時工作目錄，並且讀取 lowcode.scaffold.config.json 檔案中的 formSchema 返回給 webview。

    export const downloadScaffoldFromGit = (remote: string) => {
  fs.removeSync(tempDir.scaffold);
  execa.sync('git', ['clone', ...remote.split(' '), tempDir.scaffold]);
  fs.removeSync(path.join(tempDir.scaffold, '.git'));
  if (
 fs.existsSync(path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'))
  ) {
 return fs.readJSONSync(
   path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'),
 );
  }
  return {};
};
  3. webview 拿到 formSchema 後彈框渲染動態表單，點提交後將動態表單資料以及生成目錄等資訊傳給外掛後臺。

  4. 外掛後臺拿到表單資料後，到臨時目錄中根據 conditionFiles 配置刪除掉不需要的檔案。然後根據表單資料編譯所有 ejs 檔案，最後將所有檔案拷貝到生成目錄。

    export const compileScaffold = async (model: any, createDir: string) => {
  if (
 fs.existsSync(path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'))
  ) {
 const config = fs.readJSONSync(
   path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'),
 );
 const excludeCompile: string[] = config.excludeCompile || [];
 if (config.conditionFiles) {
   Object.keys(model).map((key) => {
     if (
       config.conditionFiles[key] &&
       config.conditionFiles[key].value === model[key] &&
       Array.isArray(config.conditionFiles[key].exclude)
     ) {
       config.conditionFiles[key].exclude.map((exclude: string) => {
         fs.removeSync(path.join(tempDir.scaffold, exclude));
       });
     }
   });
 }
 await renderEjsTemplates(model, tempDir.scaffold, excludeCompile);
 fs.removeSync(path.join(tempDir.scaffold, 'lowcode.scaffold.config.json'));
  }
  fs.copySync(tempDir.scaffold, createDir);
};
本地除錯時，就是在步驟 2 中將選擇的資料夾內容或者當前 vscode 開啟的專案內容拷貝到臨時工作目錄。

下集再說外掛其他功能，外掛原始碼：https://github.com/lowcoding/lowcode-vscode

相關文章