Scratch二次开发2：源代码目录结构解析

bailee

已于 2024-01-23 19:05:43 修改

阅读量5.4k

点赞数 31

分类专栏： Scratch 文章标签： node.js scratch 开源

于 2020-07-16 10:24:02 首次发布

本文链接：https://blog.csdn.net/bailee/article/details/107376314

版权

Scratch 专栏收录该内容

7 篇文章 28 订阅

订阅专栏

写在前面：

为公共事业做贡献，做了个开源版本：scratch.lite

开源版本带MySQL后台服务器，功能：注册、登录、保存作品、分享、修改作品名称、保存作品缩略图。

有兴趣的朋友可以去下载参考：lite: 一个轻量级的Scratch编程分享平台：注册登录、作品创作、作品管理、素材管理、用户管理，作品点赞、收藏、分享。

Scratch二次开发的纯技术交流QQ群：115224892/914159821

对于二次开发来说，最令人头痛的就是去了解原来的源代码。

熟练撑握源代码结构的好处：修改、添加、裁剪功能时，不会出一些莫名其妙的错误，或是改出一些隐藏着的BUG，二次开发时也会得心应手。

建议所有二次开发者都认真对源代码有个整体的了解（不一定要读所有源代码）。

一、scratch3.0的目录结构大体如下：（后续会慢慢完善，也请已经了解了的朋友留言，一起完善）

scratch-gui
│
├── build                    # 编译后的文件夹
│   ├── static               # 静态资源：scratch内部需要一些文件
│   ├── chunks               # scratch核心加载器
│   ├── index.html           # scratch编辑器
│   ├── player.html          # scratch播放器
│   ├── xxx.html             # 默认的还会生成两个文件，可以从webpack.config.js去掉，加快编译
│   ├── lib.min.js           # scratch核心：开发模式时21M左右，生产模式打包的14M左右
├── dist                     # 编译后的文件夹：带BUILD_MODE=dist时生成。用于集成到www版本中，此处无用
├── node_modules             # 整个项目依赖模块库，有很多，重点需要处理的是多语言库 
│   ├── scratch-l10n         # 多语言库：建议只保留中文及英文，可以大大的减小lib.min.js
├── src
│   ├── components           # UI组件
│   ├── containers           # 容器组件，承载容器组件业务逻辑
│   ├── css                  # 全局通用css
│   ├── examples             # 集成测试用例
│       ├── extensions       # 拓展案例
│   └── lib                  # 插件及高阶组件
│       ├── audio            # 声音插件
│       ├── backpack         # 背包插件
│       ├── default-project  # 默认项目
│       ├── libraries        # 素材库相关
│       ├── video            # 视频模块
│   ├── playground           # 编译后页面的模版
│   └──reducers              # 全局状态控制
├── test                     # 测试用例
├── translations             # 多语言翻译模板库
├── README.md                # 项目说明文件
├── package.json             # 项目编译、打包、依赖列表文件
└──  webpack.config.js       # webpack配置文件：生成、打包Scratch

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

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

css: 全局样式设置文件

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

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

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

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

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

二、需要的基础技能：

react：http://caibaojian.com/react/

webpack：

webpack | webpack中文文档 | webpack中文网