使用 Blockly 和 blockly-samples 进行调试

有时,在 blockly-samples 中开发插件时,您需要在 Blockly 本身中进行相应的更改。大多数插件设置为从 npm 注册表中提取 Blockly,因此您只能使用已在 npm 上发布的代码。这会使调试 Blockly 更改变得难以调试。如果您要同时在块和块示例中进行更改并进行测试,可以使用以下任一方法将未发布的更改一并使用。

您可以指示 npm 使用机器中的软件包,而不是从 npm 注册表中提取软件包。使用此方法时,您应该能够访问源代码映射,以便更轻松地调试 blockly_compressed。您可以对尚未推送到 GitHub 的核心中的更改使用此方法。

  1. 在 blockly 的分支中:

    $ npm run package
    $ cd dist
    $ npm link
    

    以下步骤会构建核心 Blockly,将其打包,然后创建指向已打包文件的符号链接。

  2. 在代码块样本分支中:

    $ npm link blockly
    

    此步骤会指示 npm 查找您之前创建的符号链接,而不是从 npm 提取软件包。

  3. npm run start,用于测试您的插件。

在 Core 中进行更改时,您必须重新构建并重新打包它。

方法 2:从 GitHub 提取

您可以指示 npm 从 GitHub 而不是从 npm 注册表中提取软件包。使用此方法,您应该能够访问源代码映射,从而更轻松地调试 blockly_compressed。您必须使用已在 GitHub 上某处发布的 blockly 版本。

  1. 确保 package.json 中插件的 scripts 部分包含以下内容:

    "postinstall": "blockly-scripts postinstall"
    

    在后续步骤中从 GitHub 安装此脚本后,此脚本会自动进行构建。

  2. 请提供 Git 地址和分支名称,而不是在 package.json 中以块的形式提供版本号:

    "blockly": "git://github.com/google/blockly.git#develop"
    

    如果您有未合并的更改,这也可以作为指向您自己的 blockly 分支的链接。

  3. 与平时差不多 npm install

  4. npm run start,用于测试您的插件

当您在核心 Blockly 中进行更改时,必须将更改推送到 GitHub 的指定分支。此外,如果您希望 npm 从 GitHub 提取新版本,则必须执行 npm uninstall blockly(或者将其从 node_modules 中移除),然后按照上文所述进行重新安装。

方法 3:高级 Playground

您可以使用高级园地(在 Blockly 核心中)来调试您的插件。使用此方法时,您将使用 blockly_uncompressed,它可以更轻松地进行调试,因为您不依赖于源代码映射。如果您在使用源代码映射进行调试时遇到问题,或者想要使用 Advanced Playground 的功能测试插件,请使用此方法。

  1. 在 blockly-samples 的插件目录中:

    $ npm run build
    $ cd dist
    $ pwd
    

    这会构建并打包插件。然后,它会输出插件的 dist 目录的完整目录路径。复制此路径;下一步中将会用到。

  2. 在 blockly 的 advanced_playground.html 中:

    <script src="$PATH_TO_DIST_DIR/index.js">
    

    然后,您还需要执行插件所需的任何设置。例如,您可能需要在选项对象中指定某些值。请在现有工作区设置中进行此设置。

  3. 在浏览器中打开高级 Playground 以测试插件。

在块中进行更改时,只需刷新即可。更改插件后,您需要重新运行 npm run build