Scratch GUI源代码的开发指南

                    (这篇文章翻译自Getting Started · LLK/scratch-gui Wiki · GitHub

Scratch GUI,也称为即将发布的Scratch 3.0编辑器,源代码在https://llk.github.io/scratch-gui/.

Scratch编辑器是由多个repo模块化构建的。每个回购协议都可以独立,但出于开发目的,您可能需要同时在多个回购协议中进行相关更改。本指南介绍了如何链接回购协议。

回购协议

你可能不需要所有的回购协议。克隆您正在处理的问题的回购协议,并根据需要克隆和链接其他回购协议。

主要有:

GUI-基于React的前端

VM-管理状态并执行业务逻辑。它将状态发送到GUI。

scratch-从块状分支。这个repo处理编辑器中出现块的部分的UI和逻辑。与GUI对话,GUI通常通过管道将内容传送到VM。

渲染器-舞台区域中出现的基于WebGL的处理程序。GUI告诉这个用户该做什么。

还有其他的,比如scratch存储和scratch音频。

预先要求:

节点8(例如brew安装节点)

如果您有多个版本的Node,则可以在Mac或Windows上使用nvm在它们之间切换https://github.com/coreybutler/nvm-windows在窗户上

Git(例如brew安装Git)

已设置SSH密钥的GitHub帐户

获取GUI

做一个积木

git将您的fork和cd克隆到其中

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

git配置分支。发展远程上游(开发将是从官方回购协议中引入变更的地方)

npm install-获取依赖项

npm start-启动热重新加载的本地服务器

打开http://localhost:8601

获取虚拟机

分岔

git将您的fork和cd克隆到其中

git远程添加上游https://github.com/LLK/scratch-vm.git

git配置分支。发展远程上游(开发将是从官方回购协议中引入变更的地方)

npm安装-获取依赖项

npm run watch-启动本地服务器,并在其发生变化时通知gui重新加载

不使用图形用户界面的游乐场http://localhost:8073/playground/

与虚拟机渲染、音频等过程相同。

scratch积木略有不同

用scratch积木做fork

git将您的fork和cd clone到其中

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

git配置分支。发展远程上游(开发将是从官方回购协议中引入变更的地方)

npm安装-获取依赖项--如果遇到错误“Closure not found”,请按照scratch blocks wiki上的说明安装闭包库。

npm链路

与npm run watch不同,您需要在每次更改应反映在GUI中的临时块时运行npm run prepublish,然后进行硬刷新。(无热重新加载)

不必运行服务器进行测试,只需打开file:tests/vertical_playground.html在浏览器中

链接回购

cd依赖项回购并运行npm链接

cd打开GUI并运行npm链接<dependency>

示例(Scratch GUI、VM和链接块):

mkdir scratch

cd scratch

git clone https://github.com/llk/scratch-gui#如果对项目进行更改,请检查您的副本

git clonehttps://github.com/llk/scratch-vm#如果对项目进行更改,请检查您的副本

git clone https://github.com/llk/scratch-blocks#如果对项目进行更改,请检查您的副本

cd scratch-vm

npm install

npm link

npm run watch

cd ../scratch-blocks

npm install

npm link

cd ../scratch-gui

npm install

npm link scratch-vm scratch-blocks

npm start

http://localhost:860

上一篇:002 Linux 文件与目录命令的必会姿势!


下一篇:js中可转bool为false的值