方法: JHipsterのBluePrintをvscodeでデバッグする

私の仲間のヒップを歓迎!
私の場合、jipsterジェネレータをデバッグする方法を見ました(既に読んでいないなら、vscodeでデバッグを理解するのに役立つかもしれません).
しかし、時にはそれは十分ではない、特にJipPhster青写真に対処する場合.
VSCODEデバッガを使用するとき、どのような青写真がどのように導入され、どのように効率的にそれらを開発するかを紹介します.
楽しむ!

青写真入門

A JHipster blueprint is a Yeoman generator that is composed from a specific JHipster sub-generator to extend the functionality of that sub-generator. The blueprint can override any defined getter of the sub generator and provide its own templates and functionality.

https://www.jhipster.tech/modules/creating-a-blueprint/
言い換えると、青写真はJipsterのあなた自身のバージョンを作る方法です.例えば、Jipipster Vuejsはクライアントフレームワークとしてvuejsを追加するためにクライアント全体を再定義した人気のある青写真です.
私は書いたsample blueprint jipsterジェネレータを拡張して、以下のような特定の機能を追加します.

会社のロゴとCSSを使用する

いくつかの設定項目をカスタマイズする

更新pom.XML

なぜ青写真をデバッグするのか

青写真を作り始めるとき、あなたのコードが本当にすることを理解するのは、常に難しいです.この行動はJipsterから来ますか?Yeomanから?何か悪いことを書きますか.など
デバッグは、アプリケーションが何をするかをマスターする最良の方法です.
もちろん、アプリケーションをたくさんデバッグしても、単体テストを書き続けることをお勧めします.

vscodeの設定

新しいタスクを追加

デバッグセッションの前に起動できるルーチンを定義することができます.devモードでNPMパッケージを扱うのは非常に迷惑なので、重要です.
あなたの.vscode/tasks.json この設定を加えてくださいdebugVcCodeFolder あなたの将来のJipsterアプリケーションとgenerator-jhipster-myBlueprint あなたの青写真名です.

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "link generator",
            "type": "shell",
            "command": "cd /tmp/debugVsCodeFolder && npm link generator-jhipster-myBlueprint"
        }
    ]
}

新しいデバッグ設定を追加する

あなたが私の最後の物語に従うならば、あなたは多分私が何を話しているかについてわかっています.新規作成launch.json ファイル名.vscode folder , このように.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug my blueprint",
            "preLaunchTask": "link generator",
            "program": "${workspaceFolder}/node_modules/generator-jhipster/cli/jhipster.js",
            "args": [
                "-d",
                "--skip-checks",
                "--skip-git",
                "--skip-cache",
                "--skip-install",
                "--blueprint",
                "myBlueprint"
                ],
            "console": "integratedTerminal",
            "cwd": "/tmp/debugVsCodeFolder"
        }
    ]
}

「PreLaunchTask」は、我々の前の仕事を加えました.各デバッグ起動前に、このタスクを実行します.明らかに、フォルダが既に存在するなら、それはリンクをするのを避けるために最適化されることができます.
「プログラム」は、我々の青写真NodeThankモジュールからのJipsterバージョンです.必ずするnpm install 前に.
“cwd”は私たちの作業フォルダであり、タスクに設定したときと同じ値を入れます.JSON

デバッグを磨く！

ブレークポイントを追加し、デバッグ構成を起動します.

おめでとう!ちょうどあなた自身のJipster青写真をデバッグしました.

結論

私たちは私たちの青写真とどのようにデバッグをリンクするタスクを追加する方法を見た.
この記事があなたの青写真の開発に役立つことを願っています.
さえずりの上で私について来て、Githubの上で我々に会うのをためらわないでくださいhttps://github.com/jhipster .
Jipsterと楽しい時を過す!