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

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

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

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

• 扩展
  • 我的扩展
    • 我的扩展名.php
    • 我的扩展名.css
    • 我的扩展.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 功能可以按名称查找您的资产。

更新了Celerity地图

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

phabricator/ $ ./bin/celerity map

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