【scratch二次开发教程 第2章】运行scratch-gui项目并了解工程结构
写在前面
该系列文章是为具有开发能力的朋友写作的，目的是帮助他们在scratch 3.0的基础上开发一套完整的集scratch 3.0编程工具、用户社区和作品云端存储及、品牌集成于一体的scratch编程平台。如果您不是开发者，但想要拥有自己的教育平台和品牌，也欢迎学习交流和洽谈合作。
所以如果您是想学习scratch少儿编程课程，那请忽略该系列的文章。

这一章我们开始尝试在本地将scratch-gui项目的最新代码运行起来，并对其项目结构有个初步的认识。

本地搭建运行
我们从官方的gitlab仓库拉取最新的代码:




git clone https://github/LLK/scratch-gui.git目前主分支是develop，并且在不断的更新中，注意查看一下自己克隆的分支是否正确。

进入工程，安装依赖：






cd scratch-guinpm install如果还没有安装npm，请参考https://npmjs/
这个过程中可能会碰到错误信息而安装失败，这时我们需要根据具体的错误信息自己去网上寻找解决方案。

安装完成后，启动服务：




npm start看到如下信息后：



打开浏览器，访问localhost:8601就会看到scratch 3.0的playground为render-gui完整模式的界面，像官网的一样:





由于scratch-gui也处于开发之中，我们看到的有些功能还没有实现，或者没有开源出来。但是对于编程模块的功能，我们可以自己尝试一下，基本上都是跟官方的一样的。如果我们不打算在编程功能模块做进一步扩展的话，这一块的功能我们可以直接拿来使用，而不需要再进行二次开发了。




工程目录结构


我们先一起来过一遍scratch-gui工程的基本目录结构，以便开始我们的二次开发之旅。




我们在WebStorm中打开项目，看到如下目录结构：





熟悉react-redux框架的朋友应该很快就清楚工程各个目录的作用， src目录是我们真正需要了解和二次开发重点要修改的目录，主要包括：


components: 组件目录，主要定义UI组件的结构和样式，负责数据的展示

containers:主要负责对components中部分组件的封装，处理组件的业务逻辑，将组件的数据与redux打通，不涉及样式

css: 全局样式设置文件

examples/extensions: 关于scratch扩展的配置示例 

lib: 工具方法目录，供组件调用的一些模块和方法，其中以-hoc.jsx结尾的高阶组件，是为UI组件提供额外的功能方法

playground: 多种模式的使用示例：积木模式(blocks-only)、舞台模式(player)、完整模式(render-gui)

reducers: redux的store的初始状态、actions和 reducers的定义

index.js: 作为 library 打包的入口文件


好了，本章我们成功拉取scratch-gui的代码，并在本地成功运行起来，然后简单地分析了它的代码目录结构，下一节课我们将尝试在平台中自定义我们的品牌logo.