Scratch二次开发1：搭建开发环境

写在前面：

为公共事业做贡献，做了个开源版本：scratch.lite

开源版本带MySQL后台服务器，功能：注册、登录、保存作品、分享、修改作品名称、保存作品缩略图。

有兴趣的朋友可以去下载参考：lite: 一个轻量级的Scratch编程分享平台：注册登录、作品创作、作品管理、素材管理、用户管理，作品点赞、收藏、分享。

Scratch二次开发的纯技术交流QQ群：115224892/914159821

前段时间陆陆续续把来编程(来编程-普惠性少儿编程平台)平台的运营功能完善了，加了些多校区版本UI定制、作业系统、Python积木化编程等，并且以后的会有更多的更新，欢迎大家去踩踏。

接下来开始做Scratch这块的优化功能。

个人觉得Scratch太“重”，想把它变“轻”点。所以，需要对Scratch3.0的源代码有一定的了解。

本人作为一名老程序员，也是一边研究，一边开发，也会一边整理整个开发过程的经验与收集的资料。希望能把整个开发过程记录下来，与大家分享，期间我会尽可能的写详细点，其他问题大家也可以留言或是私下交流。

上次是把Scratch-www直接部署到了win10操作系统上，考虑到以后平台还是要部署到Linux服务器上的，于是决定在Win10是自带的WLS中安装Ubuntu18，由于已经有了网络平台，这次直接选择了干净点的scratch-gui做二次开发。

直接开干！！！

今天的内容：搭建开发环境：Win10 WSL + Ubuntu18 + VS code。

一、在WIN10 上安装ubuntu

（现在不需要单独安装VM之类的虚拟机，直接用微软自带的WSL就好，非常好用）

这个步骤就不细说了，请参考：

1、windows10 WSL 配置流程：windows10 wls 配置流程 - 程序员大本营

2、win10 WSL安装配置Ubuntu18.04：win10安装配置Ubuntu18.04(wls)_ubuntu18.04 wls-CSDN博客

3、WSL 自定义安装、备份（可不看，仅为方便管理）：LxRunOffline 使用教程 - WSL 自定义安装、备份 - P3TERX ZONE

二、在Ubuntu上安装相应工具nodejs

A：下载nodejs源码
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

B：安装nodejs
sudo apt-get install -y nodejs

C：升级npm
sudo npm install -g npm

在此安装完后后，建议把npm安装源更换成淘宝源，国内源，以后安装各个依赖包时速度上会快此：

A：设置源
npm config set registry https://registry.npm.taobao.org

B：验证是否成功
npm config get registry

三、下载并编译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

下载与编译过程，一般不会出现什么问题。

四、在Windows中的浏览器上检查成果

整个过程比编译scratch-www要相对简单些： http://localhost:8601/

如果在退出npm start命令后，还想运行，可在Scratch-gui/build目录找到已经编译好的版本，直接运行（每个人的源代码安装目录可能不一样哦）

（这个编译好的版本，以后就可以直接放在你的服务器上使用了）

五、通过Win上的VScode对源代码做开发

(如何安装VSCode就不在此细说了，官网下载安装即可：Visual Studio Code - Code Editing. Redefined)

1、在VSCode中安装远程链接WSL插件

2、在VSCode中打开WSL Ubuntu中Scratch-gui源代码

3、现在就可以在其中编译并运行了：

此时，就可以在浏览器中打开http://localhost:8601/

今天到此为止了，后续会分析Scratch源代码的结构、各文件的作用、整个流程等。先附上一张官方的流程图：