scratch-www 在Win10下的環(huán)境搭建詳細(xì)教程

 scratch-www(scratch-gui網(wǎng)頁版）安裝與運(yùn)行

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

scratch-www下載

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

運(yùn)行環(huán)境需要

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

npm install

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

解決辦法是

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

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

用管理員身份登錄powershell。運(yùn)行以下命令：

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/

其他模塊安裝好后，運(yùn)行以下命令，安裝chromedriver

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

ok,npm install完畢

修改packpage.json

官網(wǎng)的scratch-www是要linux系統(tǒng)下編譯運(yùn)行的，有些指令在window系統(tǒng)下無法使用，需要修改packpage的scripts屬性中的一些指令。

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

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

npm i -g rimraf

修改為

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

npm run build

與gui直接運(yùn)行npm start 不一樣，scratch-www安裝后第一次運(yùn)行時，需要先運(yùn)行npm run build 再運(yùn)行npm start。為什么呢？因?yàn)閟cratch-www是多語言的網(wǎng)頁，需要先創(chuàng)建語言文件，才能正常運(yùn)行，顯示。
npm run build 時，會刪除build和intl文件夾，再translate遠(yuǎn)程獲取語言文件。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”

我發(fā)現(xiàn)最近幾次運(yùn)行到npm run translate:urls指令時會卡住，訪問不到遠(yuǎn)程文件，導(dǎo)致npm run build失敗。如果你npm run translate:urls 成功后，建議把這指令刪除掉，改成

“translate”: “npm run translate:files”

因?yàn)閟cratch-www需要的幾十種語言文件，并不都需要，這樣每次npm run build也會節(jié)省我們時間。

配置git

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

然后，在scratch-www目錄下，使用git-bash去逐一運(yùn)行

git init

git add .

git commit -m firstcommit

npm start

最后一步就是npm start了

Git系列——win 10配置git環(huán)境

1、注冊或登錄GitHub

2、下載git客戶端并安裝

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

git --version

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

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

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

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

4、生成SSH key

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

鍵入以后一直回車即可。

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

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

5、配置github的SSH key

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

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

6、驗(yàn)證配置好的Git

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

ssh -T git@github.com

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

至此，在win 10系統(tǒng)上的git環(huán)境已經(jīng)搭建完畢

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