Scratch项目和原理

"redux": "3.7.2",
"redux-throttle": "0.1.1",
"scratch-audio": "0.1.0-prerelease.20200528195344",
"scratch-blocks": "0.1.0-prerelease.20201205050032",
"scratch-l10n": "3.10.20201206031447",
"scratch-storage": "1.3.3",
"scratch-vm": "0.2.0-prerelease.20201125065300",
"scratch-paint": "0.2.0-prerelease.20201020103914",
"scratch-render": "0.1.0-prerelease.20201113223804",
"scratch-svg-renderer": "0.2.0-prerelease.20201019174008",
"startaudiocontext": "1.2.1",
"style-loader": "^0.23.0",
"text-encoding": "0.7.0",
"to-style": "1.3.3",
"wav-encoder": "1.3.0",
"xhr": "2.5.0"

scratch-vm：虚拟机，管理状态并执行业务逻辑
scratch-blocks：代码积木块模块
scratch-l10n：国际化
scratch-paint：绘图拓展
scratch-render：舞台渲染，在舞台区域出现的基于WebGL的处理器
scratch-storage：作品存储加载
scratch-svg-renderer：svg的处理
scratch-audio：使用的声音拓展

scratch-blocks是scratch-gui依赖的一个基本模块。它的作用是生成gui界面上的blocks。blocks的作用是通过拖曳的方法组成blocks堆块
scratch-gui的blocks的生成文件在scratch-blocks\blocks_vertical里
一个块的定义，对应这背后的js函数

Blockly.Blocks['motion_turnright'] = {
  /**
 * Block to turn right.
 * @this Blockly.Block
   */
  init: function() {
    this.jsonInit({
      "message0": “右转 %1 %2 度”,
      "args0": [
        {
          "type": "field_image",
          "src": Blockly.mainWorkspace.options.pathToMedia + "rotate-right.svg",
          "width": 24,
          "height": 24
        },
        {
          "type": "input_value",
          "name": "DEGREES"
        }
      ],
      "category": Blockly.Categories.motion,//块归属的类，这里是运动类。
      "extensions": ["colours_motion", "shape_statement"]
    });
  }
};

虚拟机屏蔽底层硬件差异和dom渲染差异 , 使得程序可以跨端移植
react本质上也是虚拟机,虚拟dom屏蔽设备渲染差异( dom只有pc浏览器能识别 , 但虚拟dom是js对象 , 因而在手机上能解析成viewPort),native屏蔽底层硬件差异 ,使得程序可以在Android和ios都可以运行

git clone https://github.com/LLK/scratch-vm.git
cd scratch-vm
npm install

Scratch VM能解析的文件类型，sb2为Scratch2.0项目文件，sb3为Scratch3.0项目文件