README.md

scratch-gui

Scratch GUI 是一個React組件，它包含了創建和運行Scratch3.0項目的界面。

安裝

您需要Git和Node.js來安裝它。

在您自己的node環境/應用：

npm install https://github.com/LLK/scratch-gui.git

如果您打算編輯/自己玩：

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

開始

運行這個項目需要安裝Node.js

運行

在存儲的地方打開一個命令提示符或者終端并運行：

npm start

然后進入?http://localhost:8601/? ——這個頁面會輸出默認的GUI組件

與其他Scratch庫一起開發

獲得另一個報告來指向這個代碼

如果您希望開發scratch-gui和其他依賴他的scratch庫，您可以讓其他庫使用本地的sratch-gui構建，而非使用npm install獲取默認情況下找到的當前版本的scratch-gui。

這是怎么將本地的scratch-gui代碼鏈接到其他項目的node_modules/scratch-gui。

配置

在本地的scratch-gui庫目錄里

確保您已經運行了npm install

通過運行BUILD_MODE=dist npm run build來構建dist目錄

通過運行npm link建立到當前庫的鏈接

在其他庫的根目錄（比如scratch-www）建立對scratch-gui的依賴

確保已經運行了npm install

運行npm link scratch-gui

建立或者運行資源

使用?npm run watch

作為使用?BUILD_MODE=dist npm run build?的代替，您可以使用?BUILD_MODE=dist npm run watch?。 這將監視您對?scratch-gui?代碼的修改，并且在有變化的時候自動重建。這有時候并不可靠。如果您有問題，試圖回到?BUILD_MODE=dist npm run build?直到解決它們。?

哦不！它不工作！

如果您無法正常工作，請嘗試：

• 按照上面的步驟一步一步，不要更改順序。在?npm link?之前運行?npm install?尤其重要，?因為在鏈接之后安裝將重置鏈接。
• 確保資源庫放在同一個文件夾中，例如?.../.../MY_SCRATCH_DEV_DIRECTORY/scratch-gui/ and .../.../MY_SCRATCH_DEV_DIRECTORY/scratch-www/.
• 確保一致的 node.js 版本：如果您有多個終端或者窗口打開了不同的scratch資源庫，請確保他們使用了相同的node版本
• 如果還無法工作，通過?npm unlink?斷開鏈接，再重試

測試

文檔

在編寫測試時，您可能需要查看?Jest 和 Enzyme 的文檔。

有關更多選項，請參閱?jest cli docs

運行測試

注意：如果您是Windows用戶，請在Windows cmd.exe而不是Git Bash / MINGW64中運行這些腳本。

在運行任意測試以前，確定您已經在這個（scratch-gui）資源庫的根目錄運行?npm install?

主要測試命令

運行linter，單元測試，構建，和集成測試，運行一次：

npm test

運行單元測試

要單獨運行單元測試：

npm run test:unit

在監視模式下運行單元測試（監視代碼更改并連續運行測試）：

npm run test:unit -- --watch

您可以運行單個集成測試文件（在此示例中，?button?測試）：

$(npm bin)/jest --runInBand test/unit/components/button.test.jsx

運行集成測試

集成測試使用無頭瀏覽器（a headless browser）來操作報告生成的實際html和javascript。?您不會看到這個活動（雖然您可以在播放聲音時聽到它！）。

請注意，集成測試要求您首先創建可以在瀏覽器中加載的構建：

npm run build

然后，您可以運行所有集成測試：

npm run test:integration

或者，您可以運行單個集成測試文件（在此示例中，?backpack?測試）：

$(npm bin)/jest --runInBand test/integration/backpack.test.js

如果您想在運行測試時觀看瀏覽器，而不是無頭運行，請使用：

USE_HEADLESS=no $(npm bin)/jest --runInBand test/integration/backpack.test.js

故障排除

忽略可選的依賴項

運行 npm install時，您可以收到有關可選依賴項的警告：

npm WARN optional Skipping failed optional dependency /chokidar/fsevents: npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.2.7

您可以通過添加?no-optional?開關來抑制他們:

npm install --no-optional

進一步的閱讀：?Stack Overflow

解決依賴關系

首次安裝時，您可以收到需要解決的警告：

npm WARN eslint-config-scratch@5.0.0 requires a peer of babel-eslint@^8.0.1 but none was installed. npm WARN eslint-config-scratch@5.0.0 requires a peer of eslint@^4.0 but none was installed. npm WARN scratch-paint@0.2.0-prerelease.20190318170811 requires a peer of react-intl-redux@^0.7 but none was installed. npm WARN scratch-paint@0.2.0-prerelease.20190318170811 requires a peer of react-responsive@^4 but none was installed.

您可以查看哪些版本可用：

npm view react-intl-redux@0.* version

您將安裝所需的安裝版本：

npm install --no-optional --save-dev react-intl-redux@^0.7

依賴項本身可能有更多缺少的依賴項，這將顯示如下：

user@machine:~/sources/scratch/scratch-gui (491-translatable-library-objects)$ npm install --no-optional --save-dev react-intl-redux@^0.7 scratch-gui@0.1.0 /media/cuideigin/Linux/sources/scratch/scratch-gui ├── react-intl-redux@0.7.0 └── UNMET PEER DEPENDENCY react-responsive@5.0.0

您還需要安裝它們：

npm install --no-optional --save-dev react-responsive@^5.0.0

進一步的閱讀：Stack Overflow

發布到GitHub頁面

您可以將GUI發布到github.io，以便Internet上的其他人可以查看它。?閱讀Wiki以獲取分步指南。

捐贈

我們免費提供?Scratch?，并希望保持這種方式！?請考慮?捐款?以支持我們持續的工程，設計，社區和資源開發工作。 任何規模的捐款都表示贊賞。 謝謝！

轉載于:https://www.cnblogs.com/klarkxy/p/10973674.html

總結

以上是生活随笔為你收集整理的Sratch-gui 中文文档的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。