简介
mozaik-ext-bitbucket 是一个基于 JavaScript 的 npm 包，可以帮助前端开发者快速地在网站或者应用程序中集成 Bitbucket 的一些关键指标，如 Pull Request 数量，代码仓库状态等等。本文将详细地介绍这个 npm 包的使用方法。
安装
使用 mozaik-ext-bitbucket 首先需要安装 Node.js 和 npm。如果您已经安装了这两个软件，可以直接在命令行终端中输入以下命令安装 mozaik-ext-bitbucket：
npm install --save mozaik-ext-bitbucket
当 npm 安装完成后，您需要添加 Bitbucket 的认证信息。编辑 ~/.bashrc 或者 ~/.zshrc 文件，增加下面的环境变量，并且替换 <bitbucket-login> 和 <bitbucket-password> 分别为您在 Bitbucket 中的登录名和密码。
export MOZAIK_EXT_BITBUCKET_USERNAME='<bitbucket-login>' export MOZAIK_EXT_BITBUCKET_PASSWD='<bitbucket-password>'
注意：这种方式并不是最安全的环境变量使用方式。如果您担心访问令牌泄漏，建议您使用基于操作系统的密钥存储。
基础用法
创建一个新的 mozaik 仪表盘，然后在其中包含 Bitbucket 编写的模块。
import BitbucketWidget from 'mozaik-ext-bitbucket/lib/components/BitbucketWidget.jsx'; <BitbucketWidget repository="mozaik" />
上面的示例代码中，repository 属性指定了 Bitbucket 代码仓库的名称。
配置仓库状态
您可以通过比较所有 Bitbucket 仓库的状态指标，来获得 Bitbucket 在全球的代码活跃情况。来看下面的示例代码：
import BitbucketRepositoriesStatuses from 'mozaik-ext-bitbucket/lib/components/BitbucketRepositoriesStatuses.jsx'; <BitbucketRepositoriesStatuses layout="top" theme="bright" />
上面的代码中，layout 属性指定了组件的显示方向，可选值是 top 和 bottom。theme 属性指定了组件的主题色，可选值包括 bright 和 dark。
显示 Pull Request 数量
如果您使用 Bitbucket 管理代码，您可能会经常使用 Pull Request 来管理程序员的代码更新工作。以下是如何使用 mozaik-ext-bitbucket 包来查看当前代码中的未合并 Pull Request 数量。
import BitbucketPullRequests from 'mozaik-ext-bitbucket/lib/components/BitbucketPullRequests.jsx'; <BitbucketPullRequests repository="mozaik" />
上面的代码中，repository 属性指定了您的代码存储库的名称，在这个例子中，是 mozaik。
添加自定义 Query
除了内置的组件，您还可以通过添加自定义的查询来访问和显示您的 Bitbucket 代码存储库的数据。以下是如何获取并显示代码存储库的所有 Pull Request 数据的示例。
-- -------------------- ---- -------
------ --------- ---- -------------------------------------
----- ------------------------- ------- --------- -
-------- -
----- - ------ ------------------- - - -----------
------ -
-----
----------------
----
----------------------- -- -
----
-------------------
-----------------------------------
-----
---
-----
------
--
-
-
----------------------------------- - -
------ ----------------------------
------------- ---------------------------
--
------ ------- --------------------------
---
----------------------------------------------------- ---------------------------
------------------------------------------ -------- -- -
------ ------------------------- - ----------------- ----------------- - ----------------
------------ -- --
------ -------------
------------- ------------------- -- -------- -------- ------- -----------------------
----
---上面的代码执行了一个名为 pullRequests.list 的自定义 Bitbucket 查询，并将结果组装成一个 BitbucketPullRequestsList 组件，可代替内置的 BitbucketPullRequests 组件使用。
结论
mozaik-ext-bitbucket 是一个方便的 npm 包，可以帮助前端开发者最大程度地利用 Bitbucket 的数据指标，快速开发、测试和运行其应用程序。上文将使用示例来介绍如何使用该 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055faa81e8991b448dcfbf