-----------------2018年12月7日 更新-----------------

Scratch Blocks本地文件生成

关于Scratch Blocks环境的搭建，大家在实现的过程中还是有很多的问题，目前谷歌和MIT的工程师也在进一步完善。可以通过以下方式，简单快捷的导出Scratch Blocks对应的index.html界面文件，然后像搭建普通Web一样，将其布置到自己的服务器上，也可以部署到github上，参照另一篇文章GitHub免费搭建个人博客或网站，以满足日常学习和使用的基本功能。

0. 准备工作

    /* git, npm, nodejs工具准备 */
    /* Linux下安装指令 */
    sudo apt-get install npm
    sudo apt-get install nodejs
    sudo apt-get install git

    /* 对版本要求较高，需升级 */
    npm install -g npm      /* npm升级到最新版本 */
    npm install -g n        /* nodejs升级 */
    n stable                /* 升级到最新的稳定版本 */

1. 从github下载scratch blocks的gui源代码

git clone https://github.com/LLK/scratch-gui.git

2. 编译

// 进入到下载的文件夹下scratch-gui
cd scratch-gui
// 编译
npm install

执行中会有WARN提醒，不必在意，执行完成后，文件夹下会得到node_modules等文件。

3. 导出index.html及相关文件

npm run build

build文件夹中的文件如下：

可以在浏览器中打开index.html文件，即可看到Scratch Blocks界面，将其及build文件夹中的其他文件部署到服务器上即可访问和使用。

【注】

1. 配置过程中个别指令可能需要管理员(root)权限，为避免切换，整个过程最好是在管理员(root)用户下进行操作；
2. 该配置过程中的指令是在Ubuntu环境下完成的，Windows和MacOS与此相似，可自行探索尝试；

---

---

------------ 旧版本 （不推荐）-----------

Scratch-Blockly配置过程

由于Blockly案例库开发项目需添加Scratch Blocks的相关内容，故结合Github上开源项目，进行Scratch Blocks相关环境的配置。如果你想对Scratch Blocks有进一步的了解，或者想在自己的电脑或服务器上搭建Scratch Blocks的环境，供教学和研究使用，您可以参照下面的内容，进行Scratch Blocks相关环境的配置。整个环境由3部分组成，分别是scratch-vm, scratch-blocks和scratch-gui。

Scratch Blocks

整个环境由3部分组成，分别是scratch-vm, scratch-blocks和scratch-gui。

【注】

1. 配置过程中个别指令可能需要管理员(root)权限，如有失败，可加sudo执行试试；
2. 该配置过程中的指令是在Ubuntu环境下完成的，Windows和MacOS与此相似，可自行探索尝试；

1. 准备工作

    /* git, npm, nodejs工具准备 */

    /* Linux下安装指令 */
    sudo apt-get install npm
    sudo apt-get install nodejs
    sudo apt-get install git

    /* 对版本要求较高，需升级 */
    npm install -g npm      /* npm升级到最新版本 */
    npm install -g n        /* nodejs升级 */
    n stable                /* 升级到最新的稳定版本 */

    mkdir scratch  /*便于管理，新建一个文件夹存放*/
    cd scratch
    git clone https://github.com/llk/scratch-gui     /*scratch-gui下载*/
    git clone https://github.com/llk/scratch-vm      /*scratch-vm下载*/
    git clone https://github.com/llk/scratch-blocks  /*scratch-blocks下载*/

2. Scratch-VM的配置

    cd scratch-vm
    npm install
    npm link
    npm run watch

在执行"npm run watch"时，会停留在"+4 hidden modules"这个位置，不需要久等，直接Ctrl+C终止程序进行下面的配置即可。

3. Scratch-Blocks的配置

    cd ../scratch-blocks
    npm install
    npm link

4. Scratch-GUI的配置

    cd ../scratch-gui
    npm install
    npm link scratch-vm scratch-blocks
    npm install
    npm start

5. 打开浏览器，在地址栏中输入 0.0.0.0:8061即可访问Scratch-Blocks，即Scratch 3.0界面。

Scratch 3.0 or Scratch Blocks

至此，Scratch-Blocks的配置就完成了。

目前Scratch Blocks还处于开发阶段，我们搭建的其实是测试版或预览版，所以很多功能还在开发中，包括语言切换等，后续我也会持续关注和更新。