有时,在 blockly-samples 中开发插件时,您需要在 Blockly 本身中进行相应的更改。大多数插件设置为从 npm 注册表中提取 Blockly,因此您只能使用已在 npm 上发布的代码。这会使调试 Blockly 更改变得难以调试。如果您要同时在块和块示例中进行更改并进行测试,可以使用以下任一方法将未发布的更改一并使用。
方法 1:npm 链接
您可以指示 npm 使用机器中的软件包,而不是从 npm 注册表中提取软件包。使用此方法时,您应该能够访问源代码映射,以便更轻松地调试 blockly_compressed。您可以对尚未推送到 GitHub 的核心中的更改使用此方法。
在 blockly 的分支中:
$ npm run package $ cd dist $ npm link
以下步骤会构建核心 Blockly,将其打包,然后创建指向已打包文件的符号链接。
在代码块样本分支中:
$ npm link blockly
此步骤会指示 npm 查找您之前创建的符号链接,而不是从 npm 提取软件包。
npm run start
,用于测试您的插件。
在 Core 中进行更改时,您必须重新构建并重新打包它。
方法 2:从 GitHub 提取
您可以指示 npm 从 GitHub 而不是从 npm 注册表中提取软件包。使用此方法,您应该能够访问源代码映射,从而更轻松地调试 blockly_compressed。您必须使用已在 GitHub 上某处发布的 blockly 版本。
确保
package.json
中插件的scripts
部分包含以下内容:"postinstall": "blockly-scripts postinstall"
在后续步骤中从 GitHub 安装此脚本后,此脚本会自动进行构建。
请提供 Git 地址和分支名称,而不是在
package.json
中以块的形式提供版本号:"blockly": "git://github.com/google/blockly.git#develop"
如果您有未合并的更改,这也可以作为指向您自己的 blockly 分支的链接。
与平时差不多
npm install
npm run start
,用于测试您的插件
当您在核心 Blockly 中进行更改时,必须将更改推送到 GitHub 的指定分支。此外,如果您希望 npm 从 GitHub 提取新版本,则必须执行 npm uninstall blockly
(或者将其从 node_modules
中移除),然后按照上文所述进行重新安装。
方法 3:高级 Playground
您可以使用高级园地(在 Blockly 核心中)来调试您的插件。使用此方法时,您将使用 blockly_uncompressed
,它可以更轻松地进行调试,因为您不依赖于源代码映射。如果您在使用源代码映射进行调试时遇到问题,或者想要使用 Advanced Playground 的功能测试插件,请使用此方法。
在 blockly-samples 的插件目录中:
$ npm run build $ cd dist $ pwd
这会构建并打包插件。然后,它会输出插件的 dist 目录的完整目录路径。复制此路径;下一步中将会用到。
在 blockly 的
advanced_playground.html
中:<script src="$PATH_TO_DIST_DIR/index.js">
然后,您还需要执行插件所需的任何设置。例如,您可能需要在选项对象中指定某些值。请在现有工作区设置中进行此设置。
在浏览器中打开高级 Playground 以测试插件。
在块中进行更改时,只需刷新即可。更改插件后,您需要重新运行 npm run build
。