将 CSS 和 JavaScript 文件添加到 Phabricator 扩展

每个开源框架都有自己的功能扩展方法；有些使扩展变得异常容易，而另一些……则不是那么容易。大多数时候，它归结为框架的文档记录情况。 Phabricator 在使必要的类可扩展方面做得非常出色，但可以公平地说，如果框架有更好的文档（我敢打赌，欢迎 PR！）。

在创建自己的扩展程序时，我需要向页面添加 JavaScript 和 CSS 文件。不幸的是，添加新的 CSS 和 JS 文档指出“本文档适用于 Phabricator 开发人员和贡献者。此过程不适用于第三方代码、插件或扩展。”我发现那不是真的。以下是我如何为我的扩展程序添加 JavaScript 和 CSS 资源。

将资产文件放在您的扩展目录中

我创建的每个扩展都放在它自己的目录中，所有依赖项都在该目录中：

• 扩展
  • 我的分机
    • my-extension.php
    • my-extension.css
    • my-extension.js

如果您愿意，您可以进一步将 CSS 和 JS 文件放入它们自己的目录中。每个 CSS 和 JS 文件都应该有一个 @provides 注释，您可以在需要时引用它：

/**
 * @provides my-extension-js
 */

我选择在引用名称中添加 -js 和 -css 以便于维护。

使用require_celerity_resource 获取文件

在表示您希望资产注入的视图的函数中，您将使用 require_celerity_resource 和 @provides 资产名称：

protected function renderLoginForm(AphrontRequest $request, $mode) {
 // Add CSS and JS resources to the page
  require_celerity_resource('bmo-auth-css');
  require_celerity_resource('bmo-auth-js');

  // ....
}

在构建期间，移动资产位置

Phabricator 期望所有 JavaScript 和 CSS 文件都在其 /webroot/rsrc/js/ 和 /webroot/rsrc/css/ 目录中，因此您需要在构建过程中移动您的扩展资产。为此，我将以下内容添加到我的 Dockerfile 中：

# Move static resources to phabricator, add files to celerity map array
COPY auth/my-extension.css /app/phabricator/webroot/rsrc/css/my-extension.css
COPY auth/my-extension.js /app/phabricator/webroot/rsrc/js/my-extension.js

如果您的 JavaScript 和 CSS 文件位于此位置，require_celerity_resource 函数可以按名称找到您的资产。

更新了 Cererity Map

要清除缓存和索引文件，您需要运行以下命令：

phabricator/ $ ./bin/celerity map

这是将您自己的 CSS 和 JavaScript 资产添加到 Phabricator 的简单但没有很好记录的过程！