scratch二次开发(一)

一、scratch模块

## scratch-vm  虚拟机

解析加载序列化项目文件、扩展功能实现、根据相应事件渲染舞台

###  scratch-audio 声音引擎

解析、播放声音

### scratch-blocks 代码积木块

创建积木操作块区域和每个积木对应的代码

### scratch-l10n 国际化

多语言支持

### scratch-paint 画图引擎

图片编辑器

### scratch-render：

舞台渲染

### scratch-storage 存储引擎

项目和对应素材的存储加载

### scratch-svg-renderer 

svg文件处理

二，scratch-gui的目录结构

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 打包的入口文件

 三、Scratch-gui下载并编译

A：下载源代码
git clone --depth=1 https://github.com/LLK/scratch-gui.git
 
B：安装源代码编译时需要的包
cd scratch-gui
npm install
 
C：编译源代码
npm run build
 
D：运行Scratch-GUI
npm start

编译之后，Scratch-gui/build目录存放已经编译好的版本。

执行npm start之后，通过http://localhost:8601/查看运行结果。