scrastch二次开发：代码生成器的应用

大家好，我是小黄。

今天给大家介绍一下详细代码生成器的相关内容。

顾名思义，代码生成器就是积木块翻译成翻译成 JavaScript，Python，PHP，Lua，Dart 或其他语言。

第一步就是引入相关的代码生成器

1.modules模式

import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
import {phpGenerator} from 'blockly/php';
import {luaGenerator} from 'blockly/lua';
import {dartGenerator} from 'blockly/dart';

const jsCode = javascriptGenerator.workspaceToCode(workspace);
const pythonCode = pythonGenerator.workspaceToCode(workspace);
const phpCode = phpGenerator.workspaceToCode(workspace);
const luaCode = luaGenerator.workspaceToCode(workspace);
const dartCode = dartGenerator.workspaceToCode(workspace);

2.Unpkg模式

import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
import {phpGenerator} from 'blockly/php';
import {luaGenerator} from 'blockly/lua';
import {dartGenerator} from 'blockly/dart';

const jsCode = javascriptGenerator.workspaceToCode(workspace);
const pythonCode = pythonGenerator.workspaceToCode(workspace);
const phpCode = phpGenerator.workspaceToCode(workspace);
const luaCode = luaGenerator.workspaceToCode(workspace);
const dartCode = dartGenerator.workspaceToCode(workspace);

本地js模式引入

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="python_compressed.js"></script>
<script src="php_compressed.js"></script>
<script src="lua_compressed.js"></script>
<script src="dart_compressed.js"></script>const jsCode = Blockly.JavaScript.workspaceToCode(workspace);
const pythonCode = Blockly.Python.workspaceToCode(workspace);
const phpCode = Blockly.PHP.workspaceToCode(workspace);
const luaCode = Blockly.Lua.workspaceToCode(workspace);
const dartCode = Blockly.Dart.workspaceToCode(workspace);

一般代码的生成需要很高的时效性，所以需要我们监听更新代码。频繁调用这个函数不会有任何问题。一个常见的策略是通过添加监听器到 Blockly 的 change 事件来实时生成和显示代码：

import {javascriptGenerator} from 'blockly/javascript';
function updateCode(event) {
  const code = javascriptGenerator.workspaceToCode(workspace);
  document.getElementById('textarea').value = code;
}
workspace.addChangeListener(updateCode);

自定义代码生成器
自定义的详细内容在我们之前的写过的文章里面有详细介绍，大家想了解的可以前去查看。

作者介绍：

热爱编程、写作的小菜鸡，喜交天下各路英雄好友，欢迎关注本人公众号一起学习、交流。如果您遇到什么问题请给我留言。需要源码的小伙伴请关注公众号回复：scratch获取。

关注我，一起学习探讨更多scratch-block知识！

有任何不懂的小伙伴可以加入群聊大家一起讨论。微信群过期的话可以加入QQ群：947525840。