Scratch3.0 二次开发（1）拿代码配环境

Scratch 3.0

能来看这篇稿子的应该都了解这个东西，以下几行来自百科，请选择性跳过。

Scratch是麻省理工学院开发的一款简易图形化编程工具。这个软件的开发团队称为“终身幼儿园团队”（Lifelong Kindergarten Group）。几乎所有的孩子都会一眼喜欢上这个软件。建立起做编程的欲望。

官方平台已无法访问

二次开发的初心和目的

Scratch 作为少儿编程的主力工具，基本找不到更好的替代品。但是受网络环境的影响在线平台使用起来并不方便，离线版也存在一些小问题，所以我的目的很简单，就是尽量在保持官方原汁原味的基础上做一些增强体验的小修改，因为国内相关的竞赛多数还是基于原版的Scratch。

技术基础

1. Scratch 3.0 是基于react+redux开发的，所以熟悉react、redux两兄弟是最好的了，至少能看懂源码并做些简单修改吧。
2. react 是用于构建用户界面的 JavaScript 库，所以，熟悉JS、HTML、CSS这三兄弟是必要前提了。
3. react需要用到node.js，不过记住三两个npm的命令差不多也够用了。
4. 桌面离线版使用了electron，这是一个将Web应用打包成桌面程序的框架，所以，有跟我一样喜欢离线版的，这个也了解一下最好。
5. 后台我用的是Python的Flask，这个毕竟脱离了Scratch源码，会啥就用啥吧，又有什么关系呢。

准备工作

安装 node.js

下载地址：https://nodejs.org/zh-cn/
推荐LTS版本。

安装就是一路 NEXT，也没什么特别的。结束后在cmd中查看下版本号，能看到就哦了。
node.js 安装完成后，还有一件事要做，配置一下npm的国内源，否则在抓取依赖包时会很慢，甚至超时。也就一行命令的事

npm config set registry https://registry.npm.taobao.org

正式开始吧

模块说明：

简单画个图，Scratch的模块划分其实还是蛮清晰的。最核心的就是scratch-gui模块。

拿代码

源码地址：https://github.com/LLK/scratch-gui

直接下载zip文件会比较快一些。

将代码解压到项目路径，比如，我的是在：D:/Studio/llk.scratch/scratch-gui-develop

运行

1. 安装依赖库。

craftsman@MI-AIR-GEORGE MINGW64 /d/Studio/llk.scratch/scratch-gui-develop
$ npm install

只要没报错就哦了。scratch-gui所依赖的子模块，比如scratch-vm、scratch-storage等等，都在这一步搞定了。

2. 运行。

craftsman@MI-AIR-GEORGE MINGW64 /d/Studio/llk.scratch/scratch-gui-develop
$ npm start

正常的话，结果就像下面这样

这时打开浏览器，地址栏敲入 http://localhost:8601/ 就可以看到运行结果了

OK，到此今天的任务就完成了，明天继续，拜~