Blockly は 100 を超える TypeScript ファイルで構成されています。これらを使用するには、TypeScript コンパイラ tsc によって JavaScript にコンパイルする必要があります。これにより、ローカルテストに適した多数の .js ファイルが作成されますが、インターネット経由で大量のファイルを読み込むことは、エンドユーザーにとって動作が遅くなります。Blockly の読み込みを高速化するために、Closure Compiler を使用して圧縮（圧縮）し、6 つのファイル（「バンドル」または「チャンク」）に結合し、合計サイズが非圧縮ファイルの半分未満にします。
このプロセスで、最新の ECMAScript の機能を使用するコードは、ほとんどのブラウザと互換性がある ES6 にトランスパイルされます。ES6 は通常、ほとんどのブラウザと互換性があります。したがって、エンドユーザーには圧縮されたコードのみを提供することが重要です。
google/blockly リポジトリには、ソースコードのみが含まれています。以前はビルド プロダクトが含まれていましたが、2019 年からは圧縮されたバンドルが blockly NPM パッケージとして公開され、2022 年からは GitHub の各リリースにも .tgz ファイルとして添付されています。そのため、Blockly 自体（特に core、blocks、generators、msg ディレクトリのファイル）をハッキングしない限り、Blockly をビルドする必要はありません。
Blockly のビルド、テスト、公開プロセスは、npm スクリプトを使用して Gulp タスクを実行して自動化されます。このページでは、主要なスクリプトとそれぞれのスクリプトについて説明します。
圧縮モードと非圧縮モード
TypeScript コンパイラによって生成された個々の .js ファイルから直接 Blockly を読み込むことを「非圧縮モード」と呼びます。遅いビルドステップを回避できるため、編集、コンパイル、実行のサイクルが短縮されます。また、実行される JavaScript コードが元の TypeScript ソースとほぼ同じで読み取り可能であるため、デバッグも容易になります。これにより、ソースマップに依存する必要がなくなります。
圧縮されたバンドルからの Blockly の読み込みを「圧縮モード」と呼びます。これは、blockly npm パッケージ（非公開バージョン）をテストするため、Blockly を別のパッケージの依存関係として使用する場合に、Blockly の変更をテストする場合に最適な方法です。
N.B.: Blockly リポジトリには、「非コンパイルモード」と「コンパイルモード」という用語が、それぞれ「非圧縮モード」と「圧縮モード」の同義語として使用されている場所がいくつかあります。以前は Closure Compiler がコードを圧縮（圧縮）するために使用されていたため、このような使用方法は理にかなっていますが、現在は非圧縮モードであっても TypeScript コンパイラが常に必要であるため、この代替用語は混乱を招く可能性があり、使用をおすすめしません。
クイック スタート
ローカルで行った変更により、ビルドやテストに問題がないことを確認する場合は、次のコマンドを実行します。
npm testビルドしてテストスイートを実行します
ローカルで行った変更をブラウザでテストする場合は、次のコマンドを実行します。
npm startこれにより、Blockly がコンパイルされ、非圧縮モードで Blockly を実行している Blockly プレイグラウンドを指すウェブブラウザが開きます。
変更された
core/、blocks/、generators/のファイルは自動的に再コンパイルされます。ブラウザタブを再読み込みして変更を確認します。ローカルで変更されたバージョンの Blockly をビルドし、圧縮モードで別の npm パッケージの依存関係としてテストするには、次のコマンドを実行します。
npm run packageBlockly パッケージをビルドするには
cd dist && npm linknpm にコンパイルされたファイルの場所を指示し、実行する前に
cdでプロジェクトのディレクトリに移動します。npm link blockly公開された
blocklyパッケージの代わりに、コンパイルしたばかりの Blockly をパッケージで使用するようにします。
詳細なスクリプト リファレンス
このセクションでは、Blockly の package.json ファイルにある原則 scripts とその動作について説明します。
このスクリプトは、次の 2 つの場所にファイルを生成します。
build/サブディレクトリ内のファイルは、ローカルテストに使用される中間ファイルか、ビルド パイプラインの後半部分によって取り込まれる中間ファイルです。dist/サブディレクトリ内のファイルは、公開された npm パッケージの内容を形成します。
どちらのディレクトリも、Blockly の Git リポジトリでは追跡されません。
clean
npm run clean は、build/ ディレクトリと dist/ ディレクトリを削除して以前のビルドをクリーンアップします。難解なビルドエラー、特にソースファイル名の変更に起因するエラーの修正に役立ちます。
messages
npm run messages は、msg/messages.js に行われた変更をすべて反映して msg/json/ のメッセージ ファイルを更新します。このファイルが変更されるたびに実行する必要があります。
langfiles
npm run langfiles は、msg/json のメッセージ ファイルからコンパイル済み言語ファイルを build/msg/ に生成します。
tsc
npm run tsc は、core/、blocks/、generators/ ディレクトリの内容に対して TypeScript コンパイラを実行し、個々の .js ファイルを build/src/ に出力します。
minify
npm run minify は closure-make-deps と closure-calculate-chunks を実行して、コンパイルされた .js ファイルをチャンク（圧縮バンドル）に分割する方法を決定します。その後、次のように closure-compiler を実行してチャンクを作成します。
build/src/core/の内容はdist/blockly_compressed.jsになります。build/src/blocks/の内容はdist/blocs_compressed.jsになります。build/src/generators/javascript/の内容（とbuild/src/generators/javascript.js）はdist/javascript_compressed.jsになります。dart、lua、php、pythonについても同様です。
生成されるチャックはラッパーを使用してユニバーサル モジュール定義との互換性を確保します。そのため、パッケージに含める前に追加の処理を行う必要はありません。
build
npm run build は minify タスクと langfiles タスクを実行します。これにより、圧縮モードと非圧縮モードで Blockly プレイグラウンドを読み込むために必要なすべてのことを実行できます。
package
npm run package は clean タスクと build タスクを実行し、その後:
build/msg/内のファイルに UMD ラッパーを適用し、ラップされたバージョンをdist/msg/に配置します。- 必要に応じて UMD ラッパーを使用して、さまざまなサポート ファイルを
dist/に追加しました。
publish
npm run publish は、Blockly チームが blockly npm パッケージを公開するために使用されます。Google 内部のインフラストラクチャに依存するため、外部のデベロッパーには有用ではありません。
lint
npm run lint は ESLint を実行し、Blockly ソースコードの静的分析を実行して問題を見つけます。
test
npm test（または npm run test）は、package タスクを実行し、次にさまざまな自動テスト（ESLint の実行を含む）を実行します。これは、blockly リポジトリに対して pull リクエストとして送信された任意のコードで実行して渡す必要があります。