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 を使用する場合に、Blockly の変更をテストする最良の方法です。これは、blockly npm パッケージ（未公開バージョン）をテストするためです。
N.B.: blockly リポジトリには、「uncompiled mode」と「compiled mode」という用語がそれぞれ「uncompressed mode」と「compressed mode」の同義語として使用されている箇所があります。この用法は、Closure Compiler がコードの圧縮（最小化）に使用されていた過去には意味がありましたが、現在では、圧縮されていないモードでも TypeScript コンパイラが常に必要であるため、この代替用語は混乱を招く可能性があり、推奨されません。
クイック スタート
ローカルで変更を行い、ビルドやテストが壊れていないことを確認したい場合は、次のコマンドを実行します。
npm testBlockly をビルドしてテストスイートを実行します。
ブラウザでローカルの変更をテストする場合は、次のコマンドを実行します。
npm startこれにより、Blockly がコンパイルされ、Blockly プレイグラウンドを指すウェブブラウザが開きます。Blockly プレイグラウンドは、Blockly を非圧縮モードで実行しています。
core/、blocks/、generators/内の変更されたファイルは自動的に再コンパイルされます。変更を確認するには、ブラウザタブを再読み込みします。Blockly のローカルで変更したバージョンをビルドして、圧縮モードで別の npm パッケージの依存関係としてテストするには、次のコマンドを実行します。
npm run packageBlockly パッケージをビルドします。
cd dist && npm linkコンパイルされたファイルの場所を npm に伝え、
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/に配置します。dist/にさまざまな追加サポート ファイルを追加します。該当する場合は UMD ラッパーを使用します。
publish
npm run publish は、Blockly チームが blockly npm パッケージを公開するために使用します。Google 内部のインフラストラクチャに依存しているため、外部のデベロッパーには役に立ちません。
lint
npm run lint は ESLint を実行し、Blockly ソースコードの静的分析を行って問題を検出します。
test
npm test（または npm run test）は package タスクを実行してから、さまざまな自動テスト（ESLint の実行など）を実行します。これは、blockly リポジトリに対するプルリクエストとして送信されたコードに対して実行され、合格する必要があります。