插件

插件是一段独立的代码，用于为 Blockly 添加功能。例如，它可以添加自定义字段、定义新主题或提供自定义渲染程序。插件通常通过 npm 打包和分发。

注意 ：BlocklyOptions 对象具有 plugins 属性，用于注入用于自定义 Blockly 行为的类。虽然这些类可以作为插件实现，但这并非必需，并且它们在其他方面没有关联。

如需快速了解插件，请观看我们的“插件概览”讲座 (2021)。

如果您想创建自己的插件，请参阅添加插件。

第一方和第三方插件

第一方插件由 Blockly 团队提供支持，并在 npm 上以 @blockly 作用域发布。它们可用于各种 Blockly 应用。

第三方插件由第三方独立维护和发布。它们可能更复杂、更具实验性，或者仅适用于范围较小的 Blockly 应用。

查找插件

• 访问 Blockly 插件和演示，查看第一方插件的实时演示。

• 在 npm 中搜索 keyword:blockly-plugin。范围为 @blockly 的插件由 Blockly 团队发布。如需更广泛的结果，请搜索 keyword:blockly 或 blockly。

• 请参阅 GitHub 上的 blockly-samples/plugins 目录，这是第一方插件所在的代码库。每个插件都有一个自述文件，其中介绍了该插件的行为和预期用途。

安装插件

我们建议使用 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。

请查看该插件的自述文件，了解是否有其他安装说明。

使用插件

每个插件都不尽相同，因此请参阅插件的自述文件，了解如何使用该插件。以下示例展示了如何使用 @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'
     },
   ]);
   

   

插件版本

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 后，最好检查您的任何插件是否也可以更新到新的主要版本。