scratch www
2.2.3 Hotfix
这是 Scratch 的开源 Web 客户端！这是 Scratch 网站大部分内容的代码。
特别是，该代码库包含以下代码：
scrap-www 项目的许多设计方面都针对我们的后端系统。要将它用于您自己的项目，您必须查看它进行后端调用的所有位置，并创建您自己的后端系统来执行这些功能。
另一方面，scratch-gui 项目被设计为任何人都可以使用，而无需创建后端系统，尽管它也可以支持用于项目和资产保存的后端系统。
我们欢迎您对此代码库做出贡献！您可能需要首先浏览标记为“需要帮助”的当前未解决问题列表。
为 scrap-www 做贡献可能比为 scrap-gui 做贡献更困难。这是因为 scrap-gui 可以独立运行，不需要运行任何其他服务，而 scrap-www 需要与 Scratch 团队运行的多个后端系统进行通信（请参阅“这如何与其他 Scratch 存储库配合”）多于）。如果您不熟悉 Scratch 的源代码，我们建议您首先熟悉 scrap-gui 及其标记为“需要帮助”的未决问题列表。
要做出贡献，请按照为 GitHub 上的项目做出贡献的标准步骤进行操作。
请参阅此存储库中的许可证文件。
以下是一些资源，可帮助您熟悉我们如何处理 Scratch 代码库：
该代码库使用的重要核心技术包括：
我们的测试使用：
确保您已经安装：
确保所有依赖项都是最新的非常重要，因为 scrap-www 代码仅适用于特定版本的依赖项。您可以使用以下命令更新软件包：
npm install可以安全地忽略这些警告：
npm WARN [email protected] requires a peer of react@^0.14.0 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.0 but none was installed.
npm WARN [email protected] requires a peer of redux@^2.0.0 || ^3.0.0 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.7 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.8 but none was installed.这些当前存在于 static/js/lib 中。
要将源代码编译为浏览器可以读取的 HTML 和 JavaScript 包，您可以在计算机上创建一个可以通过 Web 浏览器访问的临时版本的站点。
您可以通过运行以下命令一次性“构建”该站点：
npm run build或者，您可以运行一个服务器，通过运行以下命令来在编辑文件时重建文件：
npm run translate
npm start注意： npm run translate构建 intl 目录。如果没有它，该网站将构建得很好，但可翻译的文本字符串将无法正确显示，直到您构建了 intl。
在开发过程中， npm start会监视您对./static或./src中的文件所做的任何更新，并触发项目的重建。在开发中，构建存储在内存中，而不是从./build目录提供。
使用npm run build或npm start构建本地站点后，可以通过 Web 浏览器在浏览器的地址栏中输入localhost:8333来访问本地计算机上托管的站点。
运行npm start时，请注意以下一些重要的日志消息：
webpack: bundle is now VALID. – 该包已加载到内存中，现在可以在浏览器中查看。一旦npm start完成设置，以及您对文件所做的更新被重新编译以在浏览器中查看后，这都会显示。webpack: bundle is now INVALID. – 如果您看到此内容，则意味着您已对仍在编译以供浏览器查看的文件进行了更新。页面仍然可见，但他们不会看到您所做的任何更新。要停止npm start进程，该进程使您的 Web 浏览器可以使用该站点（在上面的“构建”中创建），请在终端中使用^C (control-c)。
npm start可以使用以下环境变量进行配置，方法是在npm start之前的命令开头设置它们：
| 多变的 | 默认 | 描述 |
|---|---|---|
API_HOST | https://api.scratch.mit.edu | API 请求的主机名 |
ASSET_HOST | https://assets.scratch.mit.edu | 资产请求的主机名 |
BACKPACK_HOST | https://backpack.scratch.mit.edu | 背包请求的主机名 |
PROJECT_HOST | https://projects.scratch.mit.edu | 项目请求的主机名 |
FALLBACK | '' | 旧站点的穿越位置 |
THUMBNAIL_URI | /internalapi/project/thumbnail/{}/set/ | 用于更新项目缩略图的 URI 模板，调用请求时将{}替换为项目 ID |
THUMBNAIL_HOST | '' | 上传服务的主机名 |
GTM_ID | '' | Google 跟踪代码管理器 ID |
GTM_ENV_AUTH | '' | Google 跟踪代码管理器环境和身份验证信息 |
NODE_ENV | null | 如果不是production ，应用程序就像开发一样 |
PORT | 8333 | 开发服务器端口 (http://localhost:XXXX) |
注意：因为默认情况下API_HOST=https://api.scratch.mit.edu ，所以请注意，默认情况下，您将在 Scratch 网站上看到真实数据并与之交互。
我们的大多数单元测试都使用 Jest 运行，但较旧的单元测试使用 TAP 框架。
要构建应用程序并运行所有单元和本地化测试，请使用以下命令：
npm test 要使用 Jest 从命令行运行单个单元测试文件，请使用以下命令：
node_modules/.bin/jest ./test/unit/PATH/TO/FILENAME.test.js注意：将PATH/TO/FILENAME替换为您要运行的文件的实际路径。
我们的集成测试假设正在运行一个更大的环境，而不仅仅是 scrap-www 本身；例如，许多要求测试用户能够登录站点，这需要后端和数据库支持。
默认情况下，测试针对我们的 Staging 实例运行，但如果您想针对另一个位置（例如本地构建）运行测试，您可以使用 ROOT_URL 环境变量（见下文）传入不同的位置。
我们所有的集成测试都使用 Jest 作为我们的测试框架。
要从命令行运行所有集成测试：
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu UNOWNED_SHARED_PROJECT_ID= # UNOWNED_UNSHARED_PROJECT_ID=# OWNED_SHARED_PROJECT_ID=# OWNED_UNSHARED_PROJECT_ID=# npm run test:integration 测试使用具有相似用户名和相同密码的多个用户。他们使用您通过 SMOKE_USERNAME 传入的用户名以及相同的用户名，并在其末尾附加 1、2、3、4、5 和 6（很快也会是更大的数字）。因此，如果您使用用户名“test”，它也会使用用户名“test1”、“test2”、“test3”等。请确保您已使用此模式创建帐户，并对所有涉及的帐户使用相同的密码。
您可以使用任何符合此模式的用户名集。每个帐户需要共享相同的密码，该密码以 SMOKE_PASSWORD 形式传入。
需要传入几个环境变量才能运行测试。它们中的大多数都有指向临时服务器的默认值。
要使用 Jest 从命令行运行单个文件：
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu node_modules/.bin/jest ./test/integration/filename.test.js要使用 TAP 从命令行运行单个文件：
SMOKE_USERNAME=username SMOKE_PASSWORD=password ROOT_URL=https://scratch.mit.edu node_modules/.bin/tap ./test/integration-legacy/smoke-testing/filename.js -R classic --no-coverage --timeout=3600-R classic使 Tap 使用旧的报告样式，这避免了“nyc”包的错误--no-coverage是因为我们不使用tap的覆盖跟踪功能timeout参数适用于整个 Tap 测试套件的长度；如果您遇到超时错误，您可能需要调整此值（某些 Selenium 测试需要一段时间才能运行） 集成测试可以使用 Saucelabs 运行，这是一种可以远程测试多个浏览器/操作系统组合的在线服务。 （目前，所有测试都是为 Mac 上的 Chrome 编写的）。
您需要一个 Saucelabs 帐户才能使用它进行测试。如果您有，您可以找到您的访问密钥：
要使用 Saucelabs 运行测试，请运行以下命令：
SMOKE_USERNAME=username SMOKE_PASSWORD=password SAUCE_USERNAME=saucelabsUsername SAUCE_ACCESS_KEY=saucelabsAccessKey ROOT_URL=https://scratch.mit.edu npm run test:integration:remote注意：目前 Jest 测试无法与 Saucelabs 一起运行。
| 多变的 | 默认 | 描述 |
|---|---|---|
ROOT_URL | scratch.ly | 您想要运行测试的位置 |
SMOKE_USERNAME | None | 您登录以进行测试的 Scratch 用户的用户名 |
SMOKE_PASSWORD | None | 您用于登录进行测试的 Scratch 用户的密码 |
SMOKE_REMOTE | false | 是否与 Sauce Labs 进行测试。如果运行 test:sm:sauce 则为 True |
SMOKE_HEADLESS | false | 以无头模式运行浏览器。此刻一片片状 |
SAUCE_USERNAME | None | 您的 Sauce Labs 帐户的用户名 |
SAUCE_ACCESS_KEY | None | 在用户设置下找到 Sauce Lab 的访问密钥 |
部署到暂存或生产会将代码上传到 S3 并配置 Fastly。
npm install
virtualenv ENV
. ENV/bin/activate
pip install -r requirements.txt
npm run build && npm run deploy| 多变的 | 默认 | 描述 |
|---|---|---|
FASTLY_SERVICE_ID | '' | bin/configure-fastly.js的 Fastly 服务 ID |
FASTLY_API_KEY | '' | bin/configure-fastly.js的 Fastly API 密钥 |
FASTLY_ACTIVATE_CHANGES | false | 配置后激活更改并清除所有内容 |
AWS_ACCESS_KEY_ID | '' | S3 的 AWS 访问密钥 ID |
AWS_SECRET_ACCESS_KEY | '' | S3 的 AWS 秘密访问密钥 |
S3_BUCKET_NAME | '' | 要部署到的 S3 存储桶名称 |
部署时，Fastly 的 API 用于克隆活动的 VCL 配置，使用此存储库的routes.json文件中的内容仅更新相关组件，并激活新的 VCL 配置。
routes.json 文件的大部分内容都很简单，但有些字段的用途并不明显。
routeAlias帮助我们防止 Fastly 中正则表达式比较代码的整体长度和复杂性变得太大。有一个大型正则表达式，我们可以快速测试传入的请求 URL，以了解它是否可以使用 S3 中的静态文件进行回复；如果未找到匹配项，我们假设需要将请求传递给 scrapr2。我们可以测试routes.json中的每个路由pattern正则表达式，但许多都是相似的，因此我们只采用所有routeAlias条目的唯一集，这样更短、更快。
对于 Windows 上的开发，您可能需要使用为您提供 Unix 界面的程序。
有多种选择可以执行此操作：
此外，您还需要安装 Node；以下是在 WSL 上安装 Node 的说明。
我们目前正在从 Scratch 的现有结构过渡到此 Web 客户端。当我们过渡时，会出现一些问题，这些问题与客户端需要如何与现有基础设施交互才能在生产中正常工作有关。
除了迁移到使用它作为我们的 Web 客户端之外，Scratch 还过渡到使用新的 API 后端 Scratch REST API（闭源）。由于该功能目前也在开发中且不完整，因此如果 API 端点不存在，我们将回退到使用现有的 Scratch 端点——这就是FALLBACK用武之地。
目前我们遇到的大多数问题都围绕着FALLBACK的使用。此变量用于指定如果请求在此 Web 客户端上下文中失败或使用API_HOST时要回退到哪个 URL。如果流程中未指定，则不会使用，任何非通过 Web 客户端或 API 发出的请求都将无法到达。
设置FALLBACK=https://scratch.mit.edu允许 Web 客户端从开发环境中的 Scratch 网站检索数据。但是，出于安全考虑，尝试通过开发环境将数据发送到 Scratch 是行不通的。这意味着以下内容将暂时被破坏：
此外，如果您设置FALLBACK=https://scratch.mit.edu ，请注意，单击尚未迁移到的网站部分的链接（当前如Discuss 、 Profile 、 My Stuff等）将带您访问Scratch 网站本身。
