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 即可

 

转载于:https://my.oschina.net/suncf/blog/3037355

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值