Scaffolding はプラグイン形式でも提供されます。 vscode はスキャフォールディングプラグインを実装します-VSCode-php.cn

Scaffolding はプラグイン形式でも提供されます。 vscode はスキャフォールディングプラグインを実装します

青灯夜游

リリース： 2022-05-06 19:32:45

転載

3902 人が閲覧しました

Scaffolding はプラグイン形式でも提供されます。次の記事では、vscode プラグインのビジュアル制作と管理の足場と原則分析について紹介します。

Scaffolding はプラグイン形式でも提供されます。 vscode はスキャフォールディングプラグインを実装します

スキャフォールディングというと、さまざまな xxx-cli を思い浮かべるかもしれませんが、この記事では別の方法を紹介します: vscode プラグインの形で実装して Web ビジュアル操作を提供する

Scaffolding はプラグイン形式でも提供されます。 vscode はスキャフォールディングプラグインを実装します

#以下では、そのインストール方法と使用方法、および実装原理について説明します。

#vscode をインストールして使用し、

lowcode プラグインをインストールします。このプラグインは効率化ツールです。スキャフォールディングは次の 1 つにすぎません。他の関数も表示できますDocumentation、このエピソードではスキャフォールディングについてのみ説明します。 [推奨学習: 「vscode 入門チュートリアル」]

プラグインをインストールした後、スキャフォールディングインターフェイスを開きます。手順は次のとおりです:

Scaffolding はプラグイン形式でも提供されます。 vscode はスキャフォールディングプラグインを実装します ##わかりました。共有スキャフォールディングを直接使用します。オプションをオンにして、直接作成します。

Scaffolding はプラグイン形式でも提供されます。 vscode はスキャフォールディングプラグインを実装します ##スキャフォールディングを作成する

テンプレートプロジェクトのルートディレクトリで lowcode.scaffold.config.json

ファイルを作成し、動的に置き換える必要があるファイルに

.ejs サフィックスを追加します。 ejs 構文:

https://ejs.bootcss.com/

Scaffolding はプラグイン形式でも提供されます。 vscode はスキャフォールディングプラグインを実装します

構成

##完全な 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 form design

によってエクスポートされたスキーマです。フォームインターフェイスは、スキーマに基づいて構築されます。formSchema.formData は、データ

#プロジェクトを作成するとき、フォームデータはコンパイルのために ejs テンプレートに渡されます。

Scaffolding はプラグイン形式でも提供されます。 vscode はスキャフォールディングプラグインを実装します

excludeCompile

: ejs でコンパイルする必要のないフォルダーまたはファイルを構成します。

conditionFiles: フォーム項目の値に基づいて、プロジェクトの作成時に次のような特定のフォルダーまたはファイルを削除します:

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

ログイン後にコピー

whenlint このフォーム項目の値が

false

の場合、設定されたフォルダーまたはファイル「.eslintrc.js」および「.prettierrc.js」は、作成されたプロジェクトから除外されます。 #ローカルデバッグスキャフォールディング

##参照プロジェクト Scaffolding はプラグイン形式でも提供されます。 vscode はスキャフォールディングプラグインを実装します

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

スキャフォールディングの公開

スキャフォールディングを git リポジトリに送信します。注意してください。プロジェクトへのオープンなパブリックアクセスであること。

スキャフォールディングを使用する

git ウェアハウスアドレスを直接使用する

#注クローンアドレスを使用して、指定したブランチ (

-b master https://github.com/lowcode-scaffold/lowcode-mock.git

など) をサポートします。内部のプライベートウェアハウスも Scaffolding はプラグイン形式でも提供されます。 vscode はスキャフォールディングプラグインを実装します

# を使用できます。

##テンプレートリストに共有して、迅速に作成します

Scaffolding はプラグイン形式でも提供されます。 vscode はスキャフォールディングプラグインを実装します

ウェアハウスを変更します

index.json

の内容を PR として送信します。 Scaffolding はプラグイン形式でも提供されます。 vscode はスキャフォールディングプラグインを実装します

实现原理

打开 webview 的时候从 cdn 拉取记录了脚手架列表的 json 文件，渲染列表视图。
点击某个脚手架，将脚手架的 git 仓库地址传到插件后台，插件后台根据 git 地址下载模版到临时工作目录，并且读取 lowcode.scaffold.config.json 文件中的 formSchema 返回给 webview。

export const downloadScaffoldFromGit = (remote: string) => {
  fs.removeSync(tempDir.scaffold);
  execa.sync(&#39;git&#39;, [&#39;clone&#39;, ...remote.split(&#39; &#39;), tempDir.scaffold]);
  fs.removeSync(path.join(tempDir.scaffold, &#39;.git&#39;));
  if (
    fs.existsSync(path.join(tempDir.scaffold, &#39;lowcode.scaffold.config.json&#39;))
  ) {
    return fs.readJSONSync(
      path.join(tempDir.scaffold, &#39;lowcode.scaffold.config.json&#39;),
    );
  }
  return {};
};

ログイン後にコピー

webview 拿到 formSchema 后弹框渲染动态表单，点提交后将动态表单数据以及生成目录等信息传给插件后台。
插件后台拿到表单数据后，到临时目录中根据 conditionFiles 配置删除掉不需要的文件。然后根据表单数据编译所有 ejs 文件，最后将所有文件拷贝到生成目录。

export const compileScaffold = async (model: any, createDir: string) => {
  if (
    fs.existsSync(path.join(tempDir.scaffold, &#39;lowcode.scaffold.config.json&#39;))
  ) {
    const config = fs.readJSONSync(
      path.join(tempDir.scaffold, &#39;lowcode.scaffold.config.json&#39;),
    );
    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, &#39;lowcode.scaffold.config.json&#39;));
  }
  fs.copySync(tempDir.scaffold, createDir);
};

ログイン後にコピー