外掛程式

外掛程式是獨立的程式碼片段，可為 Blockly 新增功能。 例如，新增自訂欄位、定義新主題，或提供自訂算繪器。外掛程式通常會透過 npm 封裝及發布。

如需外掛程式的簡介，請參閱 外掛程式總覽演講 (2021 年)。

如要建立自己的外掛程式，請參閱「新增外掛程式」。

第一方和第三方外掛程式

Blockly 團隊支援第一方外掛程式，並在 npm 的 @blockly 範圍內發布。這些積木適用於各種 Blockly 應用程式。

第三方外掛程式由獨立團隊維護及發布，這些函式庫可能較為複雜、實驗性質較高，或適用於範圍較窄的 Blockly 應用程式。

尋找外掛程式

安裝外掛程式

建議使用 npm 或 yarn 等套件管理工具安裝外掛程式。這樣就能輕鬆接收更新。

  • 使用套件管理員安裝外掛程式

    npm

    npm install @blockly/field-angle

    紗線

    yarn add @blockly/field-angle

  • 安裝外掛程式 (不使用套件管理員)

    unpkg

    <script src="https://unpkg.com/@blockly/field-angle"></script>

    您也可以複製包含外掛程式的 GitHub 存放區。如果是第一方外掛程式，則為 blockly-samples。

請參閱外掛程式的 README 檔案，瞭解是否有其他安裝說明。

使用外掛程式

每個外掛程式都不盡相同，因此請參閱外掛程式的 README，瞭解如何使用該外掛程式。以下範例說明如何使用 @blockly/field-angle 外掛程式：

  1. 從外掛程式匯入程式碼。操作方式取決於外掛程式的安裝方式。

    npm 或 yarn

    import Blockly from 'blockly';
import {registerFieldAngle} from '@blockly/field-angle';

    unpkg

    您不需要使用 import 陳述式。

    複製的存放區

    import {registerFieldAngle} from 'path/to/plugin';

  2. 視需要初始化外掛程式。提供自訂欄位的外掛程式通常會要求您註冊欄位：

    registerFieldAngle();

  3. 使用外掛程式。

    Blockly.common.defineBlocksWithJsonArray([
  {
    type: "my_angle_block",
    message0: "%1 degrees",
    args0: [
      {
        // Use @blockly/field-angle.
        type: "field_angle",
        name: "FIELDNAME",
        value: 45,
      },
    ],
    output: null,
    style: 'math_blocks'
  },
]);

    可從 360 度轉盤選取角度的欄位。

外掛程式版本

blockly-samples 中的外掛程式使用語意化版本，因此如要使用新的主要版本，必須進行破壞性變更。任何會猴子修補核心的新外掛程式，主要版本都會是 0，表示處於初始開發階段。

大多數外掛程式會將 blockly 套件做為 peerDependency，而非 dependency。這是因為我們假設您已安裝 Blockly。(如果沒有使用 Blockly，就不適合使用外掛程式)。這樣您就能自行管理 Blockly 版本，但同時也必須檢查外掛程式的 package.json，判斷所需的 Blockly 最低版本。如果外掛程式更新後需要較新版本的 Blockly，這會視為破壞性變更，並增加主要版本。

將外掛程式新增至應用程式的 package.json 時，預設會在版本前加入插入號：

"dependencies": {
  "@blockly/field-angle": "^5.0.12"
}

這樣一來，npm 就會安裝列出版本以上的所有子版本，因此 5.0.20 或 5.1.0 都可以，但 6.0.1 等新的主要版本則不行。更新 Blockly 時，建議您一併檢查是否有任何外掛程式可更新至新的主要版本。