Blockly コードを取得する方法は複数あり、読み込む方法もいくつかあります。 。
パッケージ作成スクリプト
Blockly はスターター アプリケーションをブートストラップするスクリプトを提供しており、 変更します。一般的なウェブ開発ツールである webpack や eslint ですが、React や Angular などのフレームワークは含まれていません。
そのためには、実行する前に node.js と npm をインストールする必要があります。 起動します。
JavaScript で記述したアプリケーションを新しい hello-world ディレクトリに作成する手順は次のとおりです。
npx @blockly/create-package app hello-world
TypeScript で記述したアプリケーションを新しい hello-world ディレクトリに作成するには:
npx @blockly/create-package app hello-world --typescript
これらは、パッケージ ターゲットをインポートするパッケージを作成します。また、 package.json ファイルで依存関係を管理し、簡単に最新の状態に維持できます。 ダウンロードしてください
また、プロジェクトをテストするスクリプトなど、いくつかの便利なスターター スクリプトも付属しています。 ブラウザでローカルに行う場合:
cd hello-world
npm run start
他のコマンドについては、生成された package.json ファイルを参照できます。
パッケージ化解除
アイデアをいろいろ試しているだけで、 スクリプトタグを使用して unpkg から Blockly を読み込むことができます。
HTML ページに次のコードを追加すると、 試してみましょう。
<!-- Load Blockly core -->
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="https://unpkg.com/blockly/msg/en.js"></script>
この方法はブロックリーの買収に適していません。 バンドル機能を使用できますが、プロトタイピングや 必要があります。
コードを取得する
コードを取得して Blockly を実行する方法はいくつかあります。
Blockly チームは、パッケージ管理システム（ NPM や Yarn など）が使用される場合があります。
- Blockly の変更に関する最新情報を簡単に入手できるようになりました
- Blockly に Monkeypatching するのではなくプラグインを使用することを推奨
NPM
npm install blockly --save
毛糸
yarn add blockly
GitHub
圧縮コードは GitHub のリリース。ただし、それには手動で コードを定期的にダウンロードして、最新のアップデートを受信します。 Blockly への修正が加えられました
コードを読み込む
コードを取得したら、Google カレンダーの管理画面から できます。
スクリプトタグ
<!-- Load Blockly core -->
<script src="./my-lib-directory/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="./my-lib-directory/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="./my-lib-directory/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="./my-lib-directory/blockly/msg/en.js"></script>
スクリプトタグを使用する場合は、グローバル名前空間からのインポートにアクセスできます。
// Access Blockly.
Blockly.thing;
// Access the default blocks.
Blockly.libraryBlocks['block_type'];
// Access the generator.
javascript.javascriptGenerator;
インポート
// Import Blockly core.
import * as Blockly from 'blockly/core';
// Import the default blocks.
import * as libraryBlocks from 'blockly/blocks';
// Import a generator.
import {javascriptGenerator} from 'blockly/javascript';
// Import a message file.
import * as En from 'blockly/msg/en';
メッセージ ファイルをインポートするときは、ファイルも適用する必要があります。
Blockly.setLocale(En);
必要
// Require Blockly core.
const Blockly = require('blockly/core');
// Require the default blocks.
const libraryBlocks = require('blockly/blocks');
// Require a generator.
const {javascriptGenerator} = require('blockly/javascript');
// Require a message file.
const En = require('blockly/msg/en');
メッセージ ファイルが必要な場合は、それらも適用する必要があります。
Blockly.setLocale(En);