scratch3.0二次开发运行scratch-gui项目并了解工程结构(第二章)

scratch3.0系列分享章节列表

scratch3.0二次开发scratch3.0基本介绍(第一章)

scratch3.0二次开发运行scratch-gui项目并了解工程结构(第二章)

scratch3.0二次自定义品牌logo(第三章)

scratch3.0 scratch-gui中集成自定义用户系统1(第四章)

scratch3.0 scratch-gui中集成自定义用户系统2(第五章)

scratch3.0 scratch-gui中集成自定义用户系统3(第六章)

scratch3.0 scratch-gui中集成自定义用户系统4(第七章)

scratch3.0 scratch-gui中集成自定义用户系统5(第八章)

scratch3.0 scratch-gui中集成自定义用户系统6(第九章)

scratch3.0 scratch-gui中集成作品系统1(第九章)

scratch3.0 scratch-gui中集成作品系统2(第十章)

scratch3.0 scratch-gui中集成作品系统3(第十一章)

scratch3.0 scratch-gui加载自定义初始化角色(第十二章)

scratch3.0 scratch-gui打开自己平台云端作品(第十三章)

 

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

 

本地搭建运行

我们从官方的gitlab仓库拉取最新的代码: 

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

目前主分支是develop，并且在不断的更新中，注意查看一下自己克隆的分支是否正确。

进入工程，安装依赖：

cd scratch-gui

npm install

如果还没有安装npm，请参考https://www.npmjs.com/

这个过程中可能会碰到错误信息而安装失败，这时我们需要根据具体的错误信息自己去网上寻找解决方案。

安装完成后，启动服务：

npm start 

看到如下信息后：

打开浏览器，访问http://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.

 

上一章节链接：https://blog.youkuaiyun.com/tank_ft/article/details/104038256
下一章节链接：https://blog.youkuaiyun.com/tank_ft/article/details/104039006