VSCode环境下如何通过HTML正确引入Blockly Factory自定义代码？

嗨，刚接触Blockly和JavaScript很正常，咱们一步步来解决你的问题～首先你遇到的报错，本质是HTML里没正确加载Blockly的核心库，而且自定义代码的引入顺序、工具箱配置也有问题，另外生成器代码还没补全，我帮你逐个修正：

第一步：修正HTML文件，正确加载Blockly资源 #

你的原HTML里完全没引入Blockly的核心CSS和JS，导致Blockly对象不存在，这是报错的核心原因。我们用CDN方式引入最方便（不用本地下载文件），同时调整工具箱配置和代码引入顺序：

<html>
<head>
  <!-- 引入Blockly核心样式文件 -->
  <link rel="stylesheet" href="https://unpkg.com/blockly@latest/blockly.css">
  <style>
    body {
      background-color: #fff;
      font-family: sans-serif;
      overflow: hidden;
      margin: 0;
    }
    h1 {
      font-weight: normal;
      font-size: 140%;
      margin: 10px;
    }
    #defineBlocksWithJsonArray {
      /* 原float: bottom是无效属性，改成自适应高度 */
      height: calc(100vh - 60px);
      width: 100%;
    }
  </style>
</head>
<body>
  <h1>自定义RGB颜色块</h1>
  <div id="defineBlocksWithJsonArray"></div>

  <!-- 1. 先加载Blockly核心JS -->
  <script src="https://unpkg.com/blockly@latest/blockly.js"></script>
  <!-- 2. 再加载你的自定义块代码 -->
  <script src="index.js"></script>
  <!-- 3. 最后初始化Blockly工作区 -->
  <script>
    // 工具箱不能直接写字符串，要符合Blockly的JSON格式
    var toolbox = {
      "kind": "flyoutToolbox",
      "contents": [
        {
          "kind": "block",
          "type": "color_rgb"
        },
        // 新增数字块，方便测试输入值
        {
          "kind": "block",
          "type": "math_number"
        }
      ]
    };
    var workspace = Blockly.inject('defineBlocksWithJsonArray', {toolbox: toolbox});
  </script>
</body>
</html>

第二步：完善自定义块的生成器代码 #

你的index.js里生成器部分还是TODO状态，我们补全代码，确保拖拽块后能生成正确的JavaScript代码：

'use strict';

Blockly.defineBlocksWithJsonArray([
  {
    "type": "color_rgb",
    "message0": "Red %1 Green %2 Blue %3",
    "args0": [
      {
        "type": "input_value",
        "name": "RED"
      },
      {
        "type": "input_value",
        "name": "GREEN"
      },
      {
        "type": "input_value",
        "name": "BLUE"
      }
    ],
    "output": "String", // 指定输出类型为字符串，符合rgb()格式的返回值
    "colour": 230,
    "tooltip": "生成RGB颜色字符串，例如rgb(255,0,0)代表纯红色",
    "helpUrl": ""
  }
]);

javascript.javascriptGenerator.forBlock['color_rgb'] = function(block, generator) {
  // 读取三个输入值，默认值设为0防止空输入报错
  var value_red = generator.valueToCode(block, 'RED', javascript.Order.ATOMIC) || '0';
  var value_green = generator.valueToCode(block, 'GREEN', javascript.Order.ATOMIC) || '0';
  var value_blue = generator.valueToCode(block, 'BLUE', javascript.Order.ATOMIC) || '0';
  
  // 组装成标准的rgb()格式字符串
  var code = 'rgb(' + value_red + ', ' + value_green + ', ' + value_blue + ')';
  // 字符串输出用ORDER_NONE即可
  return [code, Blockly.javascript.ORDER_NONE];
};

第三步：测试运行 #

1. 把index.html和index.js放在同一个文件夹里
2. 在VSCode中用Live Server插件打开HTML文件（直接双击打开可能有跨域问题，Live Server能完美解决）
3. 现在你可以看到工具箱里的RGB块和数字块，拖拽数字块到RGB块的输入框中，就能生成正确的RGB颜色代码啦

备注：内容来源于stack exchange，提问作者ttom