Blockly と blockly-samples によるデバッグ

Blockly-samples でプラグインを開発する場合、Blockly 自体で対応する変更が必要になることがあります。ほとんどのプラグインは npm レジストリから Blockly をフェッチするように設定されているため、使用できるのは npm ですでにリリースされているコードのみです。この場合、Blockly の変更のデバッグが困難になります。ブロックサンプルとブロックサンプルの両方で変更を行い、テストする場合は、以下のいずれかの方法を使用して、リリースされていない変更を一緒に使用できます。

npm レジストリからパッケージを取得する代わりに、マシンのパッケージを使用するように npm に指示できます。この方法を使用すると、ソースマップにアクセスできるようになるため、blockly_compressed のデバッグが容易になります。この方法は、まだ GitHub に push されていないコアの変更に使用できます。

  1. Blockly のフォークで次の操作を行います。

    $ npm run package
$ cd dist
$ npm link

    この手順では、コア Blockly をビルドしてパッケージ化し、パッケージ化されたファイルへのシンボリック リンクを作成します。

  2. Blockly-samples のフォークで次の操作を行います。

    $ npm link blockly

    このステップでは、npm からパッケージを取得する代わりに、先ほど作成したシンボリック リンクを探すように npm に指示します。

  3. プラグインをテストする npm run start。

Core で変更を加えた場合、再ビルドして再パッケージ化する必要があります。

方法 2: GitHub から取得する

npm レジストリからではなく、GitHub からパッケージを取得するように npm に指示できます。この方法を使用すると、ソースマップにアクセスできるようになるため、blockly_compressed のデバッグが容易になります。GitHub のどこかですでに公開されているバージョンの Blockly を使用する必要があります。

  1. プラグインの package.json の scripts セクションに、以下が含まれていることを確認します。

    "postinstall": "blockly-scripts postinstall"

    このスクリプトは、後のステップで GitHub から Blockly をインストールすると、自動的に Blockly をビルドします。

  2. package.json でブロックのバージョン番号を指定する代わりに、Git アドレスとブランチ名を指定します。

    "blockly": "git://github.com/google/blockly.git#develop"

    マージされていない変更がある場合、これは、独自の Blockly のフォークへのリンクにすることもできます。

  3. npm install（標準値）

  4. プラグインをテストする npm run start

Blockly コアで変更を加えた場合は、指定したブランチの GitHub に変更を push する必要があります。また、npm に GitHub から新しいバージョンを取得する場合は、上記のように npm uninstall blockly（または node_modules から削除）してから再インストールする必要があります。

方法 3: 高度なプレイグラウンド

高度なプレイグラウンド（コア Blockly 内）を使用してプラグインをデバッグできます。 この方法では blockly_uncompressed を使用します。ソースマップに依存しないため、簡単にデバッグできます。ソースマップでのデバッグがうまくいかない場合や、高度なプレイグラウンドの機能を使用してプラグインをテストする場合は、この方法を使用します。

  1. blockly-samples のプラグイン ディレクトリでは次のようになります。

    $ npm run build
$ cd dist
$ pwd

    これにより、プラグインがビルドされてパッケージ化されます。プラグインの dist ディレクトリの完全なディレクトリ パスが出力されます。このパスをコピーします。これは次のステップで使用します。

  2. Blockly の advanced_playground.html 内:

    <script src="$PATH_TO_DIST_DIR/index.js">

    次に、プラグインに必要な設定も行う必要があります。たとえば、オプション オブジェクトで特定の値の指定が必要になる場合があります。この設定は、既存のワークスペースの設定で行ってください。

  3. ブラウザで Advanced Playground を開き、プラグインをテストします。

Blockly で変更を加えた場合、更新するだけで済みます。プラグインを変更した場合は、npm run build を再実行する必要があります。