README

• 当我们对主题的更改或一系列更改感到满意时，我们如何将它们合并到 idc-isle-dc 中的“默认”设置中？
• 我们如何定义和使用基于新自定义JS组件？
  • 告诉Drupal您的组件以便自动导入

开发前的准备工作

• NodeJS - 我们已经成功使用 lts/erbium (v12.22.5) 和 lts/fermium (v14.17.5) 进行了开发，其他版本可能也可以工作，但我们尚未测试它们。
• Yarn
• Docker
• make

我们使用 Glimmer (https://glimmerjs.com/) 创建可以放置到Twig模板中的自定义JavaScript组件。大量所需功能将在这些组件中实现。我们还依赖于一个单独的GitHub仓库来设置开发环境。

• idc-isle-dc (https://github.com/jhu-sheridan-libraries/idc-isle-dc)

使用开发环境

在开发过程中，我们使用 idc-isle-dc 仓库设置的环境来启动应用程序堆栈的本地实例进行开发。当启动此堆栈中的Drupal镜像时，它将自动从GitHub下载此存储库作为本地git存储库，允许您在运行的Drupal文件结构中开发。

在Linux或Windows中的WSL(2)中，我们发现您可能需要更新文件权限，或拥有Drupal文件层次结构中所有文件的权限，因为这些文件默认属于 root。 使用 chmod 可能不会很好地与git一起使用，因此您可以使用 chown 来拥有文件。

启动开发环境

make up
  # OR
make reset

在 idc-isle-dc 中，如果您是从新克隆的仓库开始，请运行 make up，否则，如果需要，make reset 将关闭任何docker容器，清除依赖关系和数据库，然后将堆栈恢复。在启动过程中，Composer将下载

运行这些命令之一后

Twig调试

您还可以启用Drupal中的模板调试以帮助开发。为此，您可以复制Drupal的 default.services.yml 文件到 codebase/web/sites/default/ 作为 services.yml。在此文件中，您可以将 twig.config.debug 更改为 true。

在Drupal中处理主题

一旦您在Drupal中看到主题，您就可以安装并将其设置为默认主题以查看您的本地主题。为了查看您对主题所做的更改，您仍然需要清除Drupal的缓存。您可以在正常的Drupal管理界面中这样做，在Drupal的docker容器中使用Drush，或使用方便的 make 目标。

make cache-rebuild

JS开发

我们已经从 idc-isle-dc 内部开发了这个主题。Composer配置为拉取主题的源git仓库，因此您可以在 idc-isle-dc/codebase/web/themes/contrib/idc-ui-theme/ 中打开您的编辑器或IDE进行开发。这样，您将能够在Drupal的本地实例中实时查看对主题所做的更改。

JS根目录：js/

一些常用命令

• yarn build : 构建所有包
• yarn watch：为每个包运行“watch”进程，当文件更改时自动重新编译包

在开发过程中，您可以运行 yarn watch 来实时查看您的更改。JS 代码将重新编译，但您可能需要清除 Drupal 缓存才能在浏览器中看到更改。

工作区

https://yarn-classic.npmjs.net.cn/zh/docs/cli/workspace

我们正在使用 Lerna 与 Yarn 工作区协同管理跨多个目录的依赖关系。这些工具通常用于管理单仓库（monorepos）——包含多个包的单个 Git 仓库。它们能够跨包共享依赖关系以实现更快的安装。它们还可以将包链接在一起，使得某些包可以依赖于并使用另一个独立包。Lerna 可以并行运行多个 webpack 实例，允许同时监视单仓库中包的文件，但配置为单独的 webpack 实例。要并行监视，请运行：npx lerna run --parallel watch。

处理依赖关系

理论上，您可以在单个 JS 包中运行 yarn add 来添加依赖关系，但这不建议这样做。如果您想使用 Yarn 来管理依赖关系，最好使用

yarn workspace <package_name> <command>

其中 js/packages/ 下的目录名称是您包的名称。例如，如果您只想向 glimmer-idc 包添加依赖项，则运行 yarn workspace glimmer-idc add <dependency_name>。

处理构建工件

目前，我们手动更新每个 JS 包 dist/ 目录中的构建工件。当时，这是我们可以使 Composer 使用预构建工件（这是运行实例所必需的）拉入主题的最简单方法。在未来，这应该改为发布适当的、可用于生产的构建工件，并让 Composer 下载这些工件，而不是从 Github 仓库。

按照惯例，我们在为每个 JS 包在 git 中发出任何拉取请求之前运行 yarn build 并提交 dist/ 文件夹中的工件。

向 idc-isle-dc 推送更改

一旦您对主题的更改感到满意，并且构建了工件并提交了它们，请切换回 idc-isle-dc 以将更改合并到代码库中。为了保持一致性，建议您在 Drupal 容器内运行 Composer。这样做可以消除需要在本地安装 Composer 以及不同 composer 版本之间可能出现的问题的必要性。

在 Drupal 容器中，通过运行以下命令更新主题（您将需要输入您的 Github PAT 进行授权）

composer update jhu-idc/idc-ui-theme

由于 Drupal 容器挂载代码库的方式，您本地文件系统中的 composer.lock 将被更新。应该将其提交以合并主题中的新更改。

测试

我们的大部分测试都是在针对本地 Drupal 堆栈运行的集成/验收测试中进行的。您可以在 idc-isle-dc/end-to-end/tests/ui/ 中找到这些测试。

通过调用 make test test=01-end-to-end 运行这些测试

当运行测试时，它们将运行数据迁移来将 idc-isle-dc/end-to-end/testdata 中的所有数据拉入当前运行的 Drupal。它没有这样做得非常智能，所以具体来说，“admin”测试将在每次运行测试时创建新对象，这可能会导致某些测试最终失败。建议在运行此测试套件之前使用 make reset 重置并删除 Drupal 中的所有数据。CI 已设置在每次测试套件之间运行 make reset，以确保没有测试数据污染

其他资源

• Lerna