腳手架也有插件形式！下面本篇文章給大家介紹一下 vscode 插件可視化制作和管理腳手架及原理解析，希望對大家有所幫助！
提到腳手架，大家想到的可能就是各種 xxx-cli，本文介紹的是另一種方式：以 vscode 插件的形式實現(xiàn)，提供 web 可視化操作，如下圖：
下面介紹如何安裝使用，以及實現(xiàn)原理。
安裝使用
vscode 安裝 vscode 插件，此插件是一個效率工具，腳手架只是其中一個功能，更多功能可以查看vscode，這集只講腳手架相關(guān)的。【推薦學(xué)習(xí)：《vscode》】
插件安裝之后，打開腳手架界面，步驟如下圖：
可以直接使用分享的腳手架，勾選選項后直接創(chuàng)建即可：
制作腳手架
在模板項目根目錄下創(chuàng)建 lowcode.scaffold.config.json 文件，將需要做內(nèi)容動態(tài)替換的文件加上 .ejs 后綴。
ejs 語法：https://ejs.bootcss.com/
配置
一個完整 lowcode.scaffold.config.json 配置：
{ "formSchema":?{ "schema":?{ "type":?"object", "ui:displayType":?"row", "ui:showDescIcon":?true, "properties":?{ "port":?{ "title":?"監(jiān)聽端口", "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 為 vscode 導(dǎo)出的的 schema，會根據(jù) schema 構(gòu)建出表單界面，formSchema.formData 為表單默認(rèn)數(shù)據(jù)
創(chuàng)建項目的時候會將表單數(shù)據(jù)傳入 ejs 模板中進(jìn)行編譯。
excludeCompile：配置不需要經(jīng)過 ejs 編譯的文件夾或文件。
conditionFiles：根據(jù)表單項的值，在創(chuàng)建項目的時候?qū)⒛承┪募A或文件刪除，比如：
"conditionFiles":?{ "noREADME":?{ "value":?true, "exclude":?["README.md.ejs"] }, "lint":?{ "value":?false, "exclude":?[".eslintrc.js",?".prettierrc.js"] } }
當(dāng) lint 這個表單項的值為 false 的時候，配置的文件夾或文件 “.eslintrc.js”，”.prettierrc.js”，將會在創(chuàng)建的項目中排除掉。
本地調(diào)試腳手架
參考項目
https://github.com/lowcode-scaffold/lowcode-mock
發(fā)布腳手架
將腳手架提交到 git 倉庫，注意開放項目的公開訪問權(quán)限。
使用腳手架
直接使用 git 倉庫地址
注意使用 clone 地址，支持指定分支，比如 -b master https://github.com/lowcode-scaffold/lowcode-mock.git，內(nèi)部私有倉庫也可以使用
分享到模板列表中快速創(chuàng)建
修改 vscode 中 index.json 內(nèi)容，提交 pr。
實現(xiàn)原理
-
打開 webview 的時候從 cdn 拉取記錄了腳手架列表的 json 文件，渲染列表視圖。
-
點擊某個腳手架，將腳手架的 git 倉庫地址傳到插件后臺，插件后臺根據(jù) 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 {}; };
-
webview 拿到 formSchema 后彈框渲染動態(tài)表單，點提交后將動態(tài)表單數(shù)據(jù)以及生成目錄等信息傳給插件后臺。
-
插件后臺拿到表單數(shù)據(jù)后，到臨時目錄中根據(jù) conditionFiles 配置刪除掉不需要的文件。然后根據(jù)表單數(shù)據(jù)編譯所有 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); };
本地調(diào)試時，就是在步驟 2 中將選擇的文件夾內(nèi)容或者當(dāng)前 vscode 打開的項目內(nèi)容拷貝到臨時工作目錄。
下集再說插件其他功能，插件源碼：https://github.com/lowcoding/lowcode-vscode
原文地址：https://juejin.cn/post/7080787567192309797
作者：若邪
更多關(guān)于VSCode的相關(guān)知識，請訪問：vscode！！
