scratch-www(scratch-gui網頁版）安裝與運行

scratch-www是scratch-gui的網頁版，功能包括gui的編輯，保存，播放，和gui的作品展示，這里主要介紹scratch-www在window系統下的安裝和運行。

scratch-www下載

下載地址是https://github.com/LLK/scratch-www，官網有安裝說明，英文版的。

運行環境需要

• nodejs 8.0以上版本，建議最新版，降低各種報錯的概率
• 安裝git

npm install

正常的npm install會報錯，我npm install的時候，經常會卡在安裝chromedriver這個模塊，提示當前使用的chrome版本無效，需要下載指定版本的chrome(76.0.0),這個安裝的話會訪問google的網站，一般無法訪問到，會導致安裝失敗。

解決辦法是

在package.json文件的devDependencies屬性中，把"chromedriver": "76.0.0"這行刪掉，先npm install好其他模塊，再單獨安裝 chromedriver。

遇到缺少python2.7的時候，解決方法是

用管理員身份登錄powershell。運行以下命令：

npm install --global --production windows-build-tools

到時候會自動下載python的

遇到以下問題

Cannot download “https://github.com/sass/node-sass/releases/download/v4.6.1/win32-x64-79_binding.node”

先在packpage.json中刪除

在package.json文件的devDependencies屬性中，把"node-sass": "4.6.1"刪除。然后

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

其他模塊安裝好后，運行以下命令，安裝chromedriver

npm install --save-dev chromedriver@76.0.0 --chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver

ok,npm install完畢

修改packpage.json

官網的scratch-www是要linux系統下編譯運行的，有些指令在window系統下無法使用，需要修改packpage的scripts屬性中的一些指令。

修改 “clean”: “rm -rf ./build rm -rf ./intl mkdir -p build mkdir -p intl”,"rm -rf"是在linux下才有的指令。這條指令是用來刪除build和intl這兩個文件夾，再重新創建這兩個文件夾。

我們使用rimraf 來代替 rm 指令。

npm i -g rimraf

修改為

“clean”: “rimraf ./build rimraf ./intl mkdir build mkdir intl”,

npm run build

與gui直接運行npm start 不一樣，scratch-www安裝后第一次運行時，需要先運行npm run build 再運行npm start。為什么呢？因為scratch-www是多語言的網頁，需要先創建語言文件，才能正常運行，顯示。
npm run build 時，會刪除build和intl文件夾，再translate遠程獲取語言文件。build指令如下：

“build”: “npm run clean npm run translate NODE_OPTIONS=–max_old_space_size=8000 webpack --bail”,

如下NODE_OPTIONS錯誤的時候,在前面加一個 set

“build”: “npm run clean npm run translate set NODE_OPTIONS=–max_old_space_size=8000 webpack --bail”,

translate指令:

“translate:urls”: “node ./bin/get-localized-urls localized-urls.json”,
“translate:files”: “node ./bin/build-locales node_modules/scratch-l10n/www intl”,
“translate”: “npm run translate:urls npm run translate:files”

我發現最近幾次運行到npm run translate:urls指令時會卡住，訪問不到遠程文件，導致npm run build失敗。如果你npm run translate:urls 成功后，建議把這指令刪除掉，改成

“translate”: “npm run translate:files”

因為scratch-www需要的幾十種語言文件，并不都需要，這樣每次npm run build也會節省我們時間。

配置git

按照下面附錄的教程《Git系列——win 10配置git環境》去配置好github賬號ssh秘鑰

然后，在scratch-www目錄下，使用git-bash去逐一運行

git init

git add .

git commit -m firstcommit

npm start

最后一步就是npm start了

Git系列——win 10配置git環境

1、注冊或登錄GitHub

2、下載git客戶端并安裝

查看是否安裝完成：安裝完成后，在任意地方鼠標右鍵，打開 Git Bash Here，鍵入以下命令，驗證是否安裝完成

git --version

安裝完成后，在任意地方鼠標右鍵，打開 Git Bash Here，鍵入以下命令（email換成你的GitHub賬號）

git config --global user.name "xxxxx" #設置自定義用戶名
git config --global user.email "xxxxx@qq.com" #設置全局郵箱（使用github賬號郵箱）

git config --global user.name  #查看設置的全局用戶
git config --global user.email #查看設置的全局郵箱

#以下如無必要或錯誤，請不要執行
git config --global --unset user.name  #取消設置全局用戶名，這里不需要執行
git config --global --unset user.email #取消設置全局郵箱，這里不需要執行

4、生成SSH key

打開Git Bash，鍵入以下命令，即可生成你本機的ssh key（郵箱換成你自己的）。

鍵入以后一直回車即可。

ssh-keygen -t rsa -C "xxxx@qq.com" #郵箱換成你github賬號的郵箱

之后會在 【C:\Users\用戶名.ssh 】下產生兩個文件。其中，id_rsa是私鑰，id_ras.pub是公鑰。

5、配置github的SSH key

登陸的你github，找到settings–>SSH and GPG keys，然后點擊New SSH key

Title可自定義，key則填入【C:\Users\用戶名.ssh 】目錄下的【id_ras.pub】的文件內容

6、驗證配置好的Git

打開Git Bash，鍵入以下命令，檢查是否配置成功

ssh -T git@github.com

如果是類似以下輸出，則說明配置成功

至此，在win 10系統上的git環境已經搭建完畢

到此這篇關于scratch-www 在Win10下的環境配置的文章就介紹到這了,更多相關scratch-www配置內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家！