Scratch3.0搭建

Scratch模块及本地部署说明

获取地址

gui

https://github.com/LLK/scratch-gui.git

vm

https://github.com/LLK/scratch-vm.git

Blocks

https://github.com/LLK/scratch-blocks.git

Renderer

https://github.com/LLK/scratch-renderer.git

l10n

https://github.com/LLK/scratch-l10n.git

模块说明

Gui

基于React的前端,页面化开发所需要主要修改的地方。二次开发与扩展模块功能无关时,可基于其他后台语言提供api支持。

Vm

管理状态并执行业务逻辑。它将状态发送到GUI。前端所需要使用的组件业务逻辑编写部分,如需要增加其他扩展组件或迁移其他扩展组件时请修改此模块。此模块基于nodejs开发。

l10n

多语音环境支持。要修改或删除语音支持时,修改此包,修改流程同scratch-vm

Blocks

处理编辑器中出现块的部分的用户界面和逻辑。与GUI进行对话,通常将事物传递给VM。二次开发时无需修改。

部署环境

前题条件

安装好git、nodejs、npm,建议nodejs版本为:10.15 或以下版本,npm版本为:6.8.0 或以上版本

获取并编译代码

  1. 本地磁盘目录新建scratch目录
  2. 进行scratch目录
  3. 执行如下代码

git clone https://github.com/LLK/scratch-gui.git

git clone https://github.com/LLK/scratch-vm.git

其他程序省略,需要修改那个就下载那个即可。

  1. 等待clone完成,会产生 scratch-gui 和 scratch-vm目录
  2. 进入scratch-gui 目录 执行npm start可直接启动原版程序

扩展说明

  1. 进入scratch-vm 目录或用编译器打开此项目
  2. scr->extensions 为相应的扩展程序,scr-> extension-support->extension-manager.js 对外爆露nodejs服务
  3. 增加或修改后执行如下命令

npm install

npm link

进入scratch-gui目录,增加相应的扩展 scr->lib->libraries->extensions->index.jsx文件

npm install

npm link scratch-vm

npm start

  1. 打开浏览器,输入 http://127.0.0.1:8601 即可打开

发布

  1. 进入scratch-gui 目录,执行npm run build
  2. 待命令执行完毕,会产生build目录,将此目录下的文件复到制应用服务器的目录中即可

注意事项

  1. 增加扩展时,需注意扩展中所引的node包在本地化是否支持,即package.json中增加相应的依赖关系。
  2. 请在webback.config.js中增加 fs、net、tls、bufferutil、dgram、wa、dns、net编译忽略项。否则npm start时将不能通过,scratch-vm 和 scratch-gui 中都需要修改。
  3. Node中所require的包,请确定本机已经npm install -g xxxx安装,否则无法编译通过,如 npm install -g browserify-fs browserify
  4. npm start 时候,会自动加载 vm包,如vm包有变动,可在vm中执行 npm install 、npm link 创建完链接后,在gui中执行 npm link scratch-vm ,在执行 npm start 即可,其他包修改的方式和这个方式相同,不在描述
  5. 如执行命令中遇到时错误,请按提示安装相应的包,npm install -g xxxx 即可
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享