对于二次开发来说，最令人头痛的就是去了解原来的源代码。
熟练撑握源代码结构的好处：修改、添加、裁剪功能时，不会出一些莫名其妙的错误，或是改出一些隐藏着的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
