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

Scratch Blocks本地文件生成

關(guān)于Scratch Blocks環(huán)境的搭建，大家在實(shí)現(xiàn)的過程中還是有很多的問題，目前谷歌和MIT的工程師也在進(jìn)一步完善?？梢酝ㄟ^以下方式，簡(jiǎn)單快捷的導(dǎo)出Scratch Blocks對(duì)應(yīng)的index.html界面文件，然后像搭建普通Web一樣，將其布置到自己的服務(wù)器上，也可以部署到github上，參照另一篇文章GitHub免費(fèi)搭建個(gè)人博客或網(wǎng)站，以滿足日常學(xué)習(xí)和使用的基本功能。

0. 準(zhǔn)備工作

    /* git, npm, nodejs工具準(zhǔn)備 */
    /* Linux下安裝指令 */
    sudo apt-get install npm
    sudo apt-get install nodejs
    sudo apt-get install git

    /* 對(duì)版本要求較高，需升級(jí) */
    npm install -g npm      /* npm升級(jí)到最新版本 */
    npm install -g n        /* nodejs升級(jí) */
    n stable                /* 升級(jí)到最新的穩(wěn)定版本 */

1. 從github下載scratch blocks的gui源代碼

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

2. 編譯

// 進(jìn)入到下載的文件夾下scratch-gui
cd scratch-gui
// 編譯
npm install

執(zhí)行中會(huì)有WARN提醒，不必在意，執(zhí)行完成后，文件夾下會(huì)得到node_modules等文件。

3. 導(dǎo)出index.html及相關(guān)文件

npm run build

build文件夾中的文件如下：

可以在瀏覽器中打開index.html文件，即可看到Scratch Blocks界面，將其及build文件夾中的其他文件部署到服務(wù)器上即可訪問和使用。

【注】

1. 配置過程中個(gè)別指令可能需要管理員(root)權(quán)限，為避免切換，整個(gè)過程最好是在管理員(root)用戶下進(jìn)行操作；
2. 該配置過程中的指令是在Ubuntu環(huán)境下完成的，Windows和MacOS與此相似，可自行探索嘗試；

------------ 舊版本 （不推薦）-----------

Scratch-Blockly配置過程

由于Blockly案例庫開發(fā)項(xiàng)目需添加Scratch Blocks的相關(guān)內(nèi)容，故結(jié)合Github上開源項(xiàng)目，進(jìn)行Scratch Blocks相關(guān)環(huán)境的配置。如果你想對(duì)Scratch Blocks有進(jìn)一步的了解，或者想在自己的電腦或服務(wù)器上搭建Scratch Blocks的環(huán)境，供教學(xué)和研究使用，您可以參照下面的內(nèi)容，進(jìn)行Scratch Blocks相關(guān)環(huán)境的配置。整個(gè)環(huán)境由3部分組成，分別是scratch-vm, scratch-blocks和scratch-gui。

Scratch Blocks

整個(gè)環(huán)境由3部分組成，分別是scratch-vm, scratch-blocks和scratch-gui。

【注】

1. 配置過程中個(gè)別指令可能需要管理員(root)權(quán)限，如有失敗，可加sudo執(zhí)行試試；
2. 該配置過程中的指令是在Ubuntu環(huán)境下完成的，Windows和MacOS與此相似，可自行探索嘗試；

1. 準(zhǔn)備工作

    /* git, npm, nodejs工具準(zhǔn)備 */

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

    /* 對(duì)版本要求較高，需升級(jí) */
    npm install -g npm      /* npm升級(jí)到最新版本 */
    npm install -g n        /* nodejs升級(jí) */
    n stable                /* 升級(jí)到最新的穩(wěn)定版本 */

    mkdir scratch  /*便于管理，新建一個(gè)文件夾存放*/
    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

在執(zhí)行"npm run watch"時(shí)，會(huì)停留在"+4 hidden modules"這個(gè)位置，不需要久等，直接Ctrl+C終止程序進(jìn)行下面的配置即可。

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還處于開發(fā)階段，我們搭建的其實(shí)是測(cè)試版或預(yù)覽版，所以很多功能還在開發(fā)中，包括語言切換等，后續(xù)我也會(huì)持續(xù)關(guān)注和更新。