Blockly のビルド スクリプト

Blockly は 100 を超える TypeScript ファイルで構成されています。これらはコンパイルする必要があります。 TypeScript コンパイラ(tsc)によって JavaScript に変換される前に 分析できますこれにより、適切な数の .js ファイルが作成されます。 ただし、このような大量のファイルをインターネット経由で読み込む場合、 エンドユーザーのエクスペリエンスは 遅すぎますBlockly の読み込みを高速化するために、Closure Compiler を使用して圧縮(圧縮)し、6 つのファイル(「バンドル」または「チャンク」)にまとめます。合計サイズは圧縮されていないファイルの半分未満です。

このプロセスでは、最新の ECMAScript 機能(すべてのブラウザと互換性がない可能性がある機能)を使用するコードが ES6 にトランスパイルされます。ES6 は、一般に広く使用されているほとんどのブラウザと互換性があります。したがって、エンドユーザーには圧縮されたコードのみを提供することが重要です。

google/blockly リポジトリには、 ソースコードだけです。以前はビルド プロダクトも含まれていましたが、2019 年以降、圧縮バンドルは blockly NPM パッケージとして公開され、2022 年以降は 各 GitHub リリース.tgz ファイルとして添付されるため、Blockly 自体(特に coreblocksgeneratorsmsg ディレクトリ内のファイル)をハッキングしない限り、Blockly をビルドする必要はありません。

Blockly のビルド、テスト、公開のプロセスは、npm スクリプトを使用して Gulp タスクを実行することで自動化されます。このページでは、主要なスクリプトとそれぞれの処理内容について説明します。

圧縮モードと非圧縮モード

生成された個々の .js ファイルから Blockly を直接読み込む TypeScript コンパイラは「非圧縮モード」と呼ばれます。複数の遅いビルドステップを回避できるため、編集、コンパイル、実行のサイクルを迅速に行うことができます。また、実行される JavaScript コードは元の TypeScript ソースとほぼ同じ読みやすさであるため、ソースマップへの依存を排除でき、デバッグも容易になります。

圧縮バンドルから Blockly を読み込むことを「圧縮モード」と呼びます。これは、Blockly を依存関係として使用する場合に変更内容をテストする最善の方法です。 別のパッケージのもの。これは、blockly(非公開バージョン)をテストするためです。 npm パッケージです。

注: Blockly リポジトリの一部では、「未コンパイル モード」と「コンパイル済みモード」という用語が「未圧縮モード」と「圧縮モード」の同義語として使用されています。以前は、Closure Compiler を使用してコードを圧縮(圧縮)していたため、この用語は理にかなっています。しかし、現在は、圧縮モードでも TypeScript コンパイラが常に必要であるため、この代替用語は混乱を招く可能性があるため、使用しないことをおすすめします。

クイック スタート

  • ローカルで変更を加えた場合に ビルドまたはテストを実行する場合は、

    npm test
    

    テストスイートを実行しました

  • ブラウザでローカルの変更をテストする場合は、次のコマンドを実行します。

    npm start
    

    これにより、Blockly がコンパイルされ、Blockly を指すウェブブラウザが開きます。 Blockly を非圧縮モードで実行します。

    core/blocks/generators/ 内のファイルが変更されると、自動的に再コンパイルされます。変更を確認するには、ブラウザタブを再読み込みします。

  • ローカルに修正した Blockly を圧縮ファイルでビルドしてテストするには、 別の npm パッケージの依存関係として次のコマンドを実行します。

    npm run package
    

    で Blockly パッケージをビルドし、

    cd dist && npm link
    

    を実行して、コンパイルされたファイルの場所を npm に伝え、cd をプロジェクトのディレクトリに移動します。

    npm link blockly
    

    パッケージで、新しくコンパイルされたバージョンの Blockly を 公開されている blockly パッケージの場所。

詳細なスクリプト リファレンス

このセクションでは、Blockly の package.json ファイル内のプリンシパル scripts について説明します。 説明も添えておきます

これらのスクリプトは、次の 2 つの場所でファイルを生成します。

  • build/ サブディレクトリ内のファイルは、ローカルに使用される中間ファイルです。 ビルド パイプラインの後の部分で取り込むこともできます。
  • dist/ サブディレクトリ内のファイルが、公開された npm パッケージの内容を形成します。

どちらのディレクトリもブロック型の Git リポジトリでは追跡されません。

clean

npm run clean は、build/ を削除して以前のビルドをすべてクリーンアップし、 dist/ ディレクトリ。難解なビルドの失敗を修正するのに役立つ(特に 大きな問題に 対処できます

messages

npm run messages は、変更があれば msg/json/ のメッセージ ファイルを更新します。 msg/messages.js に対して実行され、毎回 変更されます。

langfiles

npm run langfiles は、コンパイル済みの言語ファイルを build/msg/ に生成します。 msg/json 内のメッセージ ファイルから取得されます。

tsc

npm run tsc は、core/ の内容に対して TypeScript コンパイラを実行します。 blocks/ ディレクトリと generators/ ディレクトリ。個々の .js ファイルを出力します。 build/src/ まで。

minify

npm run minifyclosure-make-depsclosure-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 になります。
  • dartluaphppython についても同様です。

生成されたチャックはラッパーを使用して、ユニバーサル モジュール定義に含まれないため、余分な処理は 必要があります。

build

npm run build は、minify タスクと langfiles タスクを実行します。これで、 Blockly プレイグラウンドを圧縮または 非圧縮モードか選択できます

package

npm run packageclean タスクと build タスクを実行し、その後に次の処理を実行します。

  • build/msg/ のファイルに UMD ラッパーを適用し、ラップされたバージョンを dist/msg/ に配置します。
  • dist/ にさまざまな追加サポート ファイルを追加し、該当する場合は UMD ラッパーを追加します。

publish

npm run publish は、Blockly チームが blockly npm パッケージを公開するために使用します。Google 内部のインフラストラクチャに依存するため、外部デベロッパーには役立ちません。

lint

npm run lintESLint を実行し、Blockly ソースコードの静的分析を実行して問題を検出します。

test

npm test(または npm run test)は package タスクを実行し、その後さまざまなタスクを実行します。 自動テスト(ESLint の実行を含む)。これを実行して、 Blockly リポジトリに対して pull リクエストとして送信されたすべてのコード。