Sratch-gui 中文文档

最新推荐文章于 2024-03-24 09:52:46 发布

weixin_30271335

最新推荐文章于 2024-03-24 09:52:46 发布

阅读量705

点赞数

原文链接：http://www.cnblogs.com/klarkxy/p/10973674.html

版权

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库目录里
1. 确保您已经运行了npm install
2. 通过运行BUILD_MODE=dist npm run build来构建dist目录
3. 通过运行npm link建立到当前库的链接
在其他库的根目录（比如scratch-www）建立对scratch-gui的依赖
1. 确保已经运行了npm install
2. 运行npm link scratch-gui
3. 建立或者运行资源

使用 `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