★ FEATURED ARTICLE 30 分钟搭一个 Blockly 可视化编程编辑器最小配置到能生成代码【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blockly如果你想在网页里做一个像 Scratch 那样的积木式编程编辑器又不想从头处理 SVG、拖拽和代码生成Blockly 可以帮你。这篇文章带你从最小可用配置开始跑通一个能生成 JavaScript 代码的编辑区。Blockly 是一个用于构建可视化编程编辑器的开源库用户通过拖拽、拼接图形化的积木块来表达变量、逻辑判断、循环这些编程概念无需关心语法和标点最终还能把拼好的积木导出成真实可运行的代码。仓库里同时提供了 JavaScript、Python、PHP、Lua、Dart 五种内置代码生成器你可以在 generators/ 下看到它们的源码。适合谁用先确认你的需求落在 Blockly 的能力范围内在动手前先判断你的场景适不适合用 Blockly。它解决的是用积木拼逻辑这类需求而不是通用的代码编辑。选 Blockly你想做一个面向学生、儿童或非专业开发者的编程教学工具需要把逻辑拼出来并导出成代码或者你想在自己的应用里嵌入一个可编程的可视化编辑区。不选 Blockly你只是需要一个给程序员写代码用的文本编辑器带语法高亮、自动补全。那种场景用专门的代码编辑器组件更合适用 Blockly 反而别扭。需要权衡的情况如果你要的只是能拖拽、能存、能看的画布不需要生成代码可以用更轻的方案只有当你确实需要积木 → 真实代码这条链路时Blockly 的优势才真正体现出来。如果你落在第一种情况下面的最短路径就能跑起来。最小可用配置快速启用一个 Blockly 编辑区下面是最小可用的三步装包、准备容器、注入编辑器。安装依赖。Blockly 发布在 npm 上在 Node 环境要求 18 及以上执行npm install blockly准备一个容器元素。在页面里放一个有明确尺寸的div比如div idblocklyDiv stylewidth: 100%; height: 600px;/div容器必须有高度否则编辑器不会显示出来。注入编辑器。在你的脚本里导入核心库、内置积木和生成器再调用inject把编辑器放进容器import * as Blockly from blockly; import blockly/blocks; import { javascriptGenerator } from blockly/javascript; const workspace Blockly.inject(blocklyDiv, { toolbox: { content: [ { kind: block, type: controls_if }, { kind: block, type: math_arithmetic }, { kind: block, type: text_print }, ], }, });这里的toolbox决定了左侧或顶部能拖出哪些积木。toolbox这个参数可以接收 XML 元素、数组形式的工具栏定义或 JSON具体可选参数以 core/blockly_options.ts 中声明的BlocklyOptions为准——comments、grid、zoom、move、media等都在里面。小提示inject的第二项参数是可选的。如果你不传会拿到一个默认编辑器但要让它有积木可用建议至少提供toolbox。验证配置确认编辑器正常加载并生成代码改完配置后按下面顺序逐项确认能快速定位问题出在哪一步。看容器是否出现编辑区。打开页面#blocklyDiv内应渲染出可拖拽的画布和工具栏。如果空白多半是容器没有高度或脚本加载顺序导致inject先于 DOM 执行。看能不能拼积木。从工具栏拖出一块积木确认它能放进画布、互相拼接。看能不能生成代码。拼好逻辑后调用生成器把整个工作区导出成代码const code javascriptGenerator.workspaceToCode(workspace); console.log(code);workspaceToCode是各生成器统一提供的方法传入工作区即可得到对应语言的代码字符串。看能不能存和读。想持久化时用序列化接口JSON 与 XML 两种格式都支持const state Blockly.serialization.workspaces.save(workspace); // 存成 JSON Blockly.serialization.workspaces.load(JSON.parse(state), workspace); // 读回如果你只想快速看到完整效果而不想自己搭页面仓库自带一个 Playground在 tests/playground.html 里已经配置好了工具栏、多语言切换和导出成各种代码的按钮运行npm start即可在本地打开体验方便你对照自己的配置。常见问题与排错编辑器是空白的。99% 是容器没有高度。给#blocklyDiv一个明确的height或让父容器撑开。inject只负责把内容放进你给的容器不负责撑高度。控制台报 container is not in current document。说明你传入的容器还没被放进 DOM。先把div渲染出来再调用inject。工具栏没有积木。检查toolbox里kind: block的type是否与已加载的积木类型一致没加载blockly/blocks时很多内置积木类型是不可用的。生成的代码和我预期不一样。先确认用的是对应语言的生成器本例是javascriptGenerator再检查你拼的积木里是否有尚未实现生成逻辑的自定义积木。界面显示的是英文想换中文。加载对应语言的 langfile 即可仓库的翻译源文件放在 msg/json/ 下包含zh-hans等上百种语言构建后输出的语言文件位于build/msg/。选型建议内置的 5 个代码生成器怎么选仓库内置五个生成器导入方式一致只是产物语言不同。按你的目标运行环境选你要导出的目标语言对应导入说明JavaScriptimport { javascriptGenerator } from blockly/javascript默认最常用前端环境首选Pythonimport { pythonGenerator } from blockly/python教学、脚本场景常用PHPimport { phpGenerator } from blockly/php服务端 Web 场景Luaimport { luaGenerator } from blockly/lua嵌入式或特定运行时Dartimport { dartGenerator } from blockly/dartDart/Flutter 生态选型的判断很简单你的代码最终在哪里运行就选那个语言的生成器。如果你拿不准先用 JavaScript 跑通整条链路配置 → 拼积木 → 导出确认没问题后再切换其他语言切换成本很低。每个生成器对同一组积木的覆盖情况不同具体以 generators/ 下对应目录的实现为准。进阶方向下一步可以做的三件事跑通最小配置后可以按这个顺序加深自定义积木。当你发现内置积木不够用时注册自己的积木类型并为其补上对应语言的生成逻辑这一步直接决定编辑器能不能表达你的业务。接上持久化和主题。把save/load接到你的存储上再配一套主题与media资源路径仓库的 media/ 里含声音与图标让编辑区融入你的产品风格。换渲染器。inject选项里的renderer可切换渲染风格仓库在 core/renderers/ 下提供了多种渲染器实现适合对视觉表现有要求的场景。下一步建议现在就在一个空 HTML 里加上面那个最小配置跑npm start或起一个静态服务打开页面拖出三块积木并console.log(javascriptGenerator.workspaceToCode(workspace))。看到控制台打印出对应代码你就完成了从 0 到能生成代码的编辑区的整条链路。【免费下载链接】blocklyThe web-based visual programming editor.项目地址: https://gitcode.com/gh_mirrors/bloc/blockly创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
