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

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

熟练撑握源代码结构的好处：修改、添加、裁剪功能时，不会出一些莫名其妙的错误，或是改出一些隐藏着的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：

          https://www.webpackjs.com/

          https://segmentfault.com/a/1190000021494964?utm_source=tag-newest

          https://segmentfault.com/a/1190000006814420

ES6：https://blog.csdn.net/dabinge666/article/details/78866125

 

三、后续内容：（敬请关注）

1、多语种裁剪：只保留中、英文，可以把lib.min.js减小2M左右；

2、实现登录功能：简单分析scratch-www及在scratch-gui上实现相同账号功能；

3、实现保存、分享功能：添加一个小型服务器功能，并实现把项目保存到MySQL中及分享；

4、scratch-gui定制：用一个例子说明如何定制自己的scratch；

5、... ...

 

如果对您有用，请点个赞再走！！！Bailee 了个Bye！！！

本文地址：https://blog.csdn.net/bailee/article/details/107376314