Zeplin 就像设计师和开发人员之间的工作流程连接器。由于每个团队的转变都不尽相同，我们一直在思考如何帮助用户根据自己的需求定制 Zeplin 工作流程，并尽可能提高效率。

因此，我的职责之一就是回答用户关于定制的问题，帮助他们探索如何利用我们的 SDK 扩展他们的 Zeplin 工作流程。

在本篇博客中，我将向您展示一个实用示例，说明您的开发人员如何使用我们的 SDK 从 Zeplin 中的 Styleguide 自动下载图标。这样，除了将样式指南作为可重用 UI 元素的中心参考之外，开发人员还可以从中快速获取所需的元素。

关于 Zeplin Styleguides

在 Zeplin 中使用样式指南意味着您可以在开发过程中为所有可重复使用的元素和设计系统组件引用一个资源，而不是链接到不同设计库的多个链接，这些设计库可能处于不同的就绪和组织状态。

作为您的统一参考，您团队的风格指南通常会包含您的所有资产，如图标和整个项目中使用的其他图片。这些资产还将与其他可重复使用的组件（如选择器、单选按钮和文本字段等输入元素）放在一起。

说到图标，大多数团队的风格指南中都会有几十个或更多。因此，你可能会想--我必须逐个下载它们吗？理想情况下，您可以选择将所有图标批量下载到本地，以便在应用程序中进行管理。有了风格指南和 Zeplin Javascript SDK 中图标的通用命名方法，我们就可以实现这一点！

要开始使用 Javascript SDK，请查看我们的教程。在 .env 文件中设置好个人访问令牌后，就可以继续下面的步骤了。

我们的 HTTP 请求处理程序需要使用 Axios。实际上，Zeplin 的 Javascript SDK 已经在幕后使用了 Axios，但我们将为 SDK 提供一个自定义处理程序，使用 axios-rate-limit 来帮助确保我们对请求进行一定的节流。向 Zeplin API 请求的速率限制是每个用户每分钟 200 次请求，因此如果你正在开发一个拥有大量屏幕和资产的大型项目，添加这个内置速率限制的自定义 HTTP 请求处理程序将确保你不会被速率限制所阻挡。

一次下载和写入如此多的文件可能会对系统造成负担，因此，与速率限制类似，我们将使用 p-limit 库来管理并发下载的数量。你可能并不想要所有资产，所以如果你只想下载 SVG 或 PNG 资产，我们可以使用 Commander 为应用程序提供一些类似的额外选项。由于我们可能会同时下载大量资产，因此最好能在命令行中看到下载进度，所以我们将使用 Progress 库来构建下载进度。最后，我们将使用 dotenv 来安全存储个人访问令牌和其他可能需要的环境变量。如果你想在一行中安装所有这些变量，请点击这里！

如果还没有，让我们创建文件 download-styleguide-icons.js，然后开始导入我们的依赖项。

在这里，我们使用 dotenv 配置环境，从根目录下的 .env 文件加载环境变量。您的目录路径可能会有所不同，上面的示例来自其他 SDK 脚本的 repo，其中包含一个环境文件，用于加载这些脚本中需要的其他变量。设置环境文件时，可以参考上述软件仓库中的 .env.example。我们唯一需要的变量是 PERSONAL_ACCESS_TOKEN。

本节使用从环境变量中获取的个人访问令牌初始化 Zeplin API 客户端，并设置 Axios 的速率限制，以防止超过 Zeplin API 的速率限制，设置每分钟（60000 ms）最多 200 个请求。

现在，我们准备使用 Zeplin SDK 的 components.getStyleguideComponents() 方法从样式表中获取组件。调用该方法将返回样式表中的所有组件，但这并不是我们想要的，因此我们要过滤这些结果，使其只包含图标。常见的命名惯例是在命名图标时使用 ic-、ico-、ico- 等前缀。

让我们先为结果创建一个简单的过滤器，只包含以给定前缀开头的组件。

有了经过筛选的组件对象列表后，我们将对它们进行解析，以获取要下载的图像文件的 URL，然后更新图像文件的名称，以便在本地存储后更容易地引用。在下面的代码中，我用破折号替换了所有斜线字符。在设计系统组件的命名规范中，使用斜线很常见，但 fs 模块会将这些斜线解释为嵌套目录，因此为了将文件保存在我们想要的位置，我们将用连字符替换它们。

如果我们在调用端点时传入了该选项，那么它就包含了一个 latestVersion 属性。latestVersion 属性将包括从 CDN 下载图片文件 URL 的数据。

有了帮助我们解析数据的函数，现在就可以实际调用 Zeplin API 从样式表中检索组件了。可能会有很多组件，而端点需要偏移和限制参数，因此我们将在一个 while 循环中调用函数，直到返回 0 个结果，并使用偏移和限制参数来处理分页。

我们将创建一个异步函数 getStyleguideComponents，并输入 Styleguide ID 和一个选项对象。请确保包含 includeLatestVersion = true 选项，以确保我们能访问图片文件下载 URL 的最新组件版本。

差不多了。现在我们已经有了一个经过筛选的图标列表，其中包含了我们想要的相关数据，如密度和文件格式。接下来，我们将创建一个下载单个图标的函数，然后遍历图标列表以运行该函数。

我们可以将这个函数命名为 downloadAsset，它将接收我们在上一步过滤和缩减组件时创建的组件对象中的名称、url 和文件名参数。我们还将传入稍后创建的进度条，函数末尾的 progress.tick() 将在命令行中向前移动进度条。

当我们调用 fs.writeFile() 时，我们会传入目录名、图标名和格式化后的图标文件名。您可以根据自己的需要更改格式，以便在本地组织图标。

是时候用 Commander 启动我们的命令行函数了。我们称之为程序。

然后，我们将设置命令行界面调用程序，这样就可以使用 Commander 的 .requiredOption() 和 option() 方法添加样式表 ID、图标格式、标识符和密度等选项。这些方法接收 3 个参数，我们将以第一个必选项 Styleguide ID 为例：第一个参数是我们称为-s 的速记，然后是--styleguideId，后面是稍后用于引用参数的变量名。最后，如果有人添加了--help 标志，他们就会看到第三个参数中的内容，即如何使用该选项的说明。使用--help时，用户将看到该程序命令行界面上所有可能使用的选项列表。点击这里了解更多关于如何使用 Commander 的信息。

其余的选项用于设置标识符（图标组件共享的通用字符串，因此我们可以解析所有组件，只选出图标）、下载格式和下载密度。定义完所有选项后，我们将使用 action() 方法将之前使用过的所有函数组合在一起。这样我们就可以继续进行了：

到目前为止，我们只是返回组件，过滤掉用户提供的格式和密度，并与选项中提供的标识符进行匹配。

既然我们已经知道要处理多少组件，就可以在命令行中使用进度条库来记录进度。当进度条移动到空白处时，它将以 = 等号绘制，我们定义的宽度最多为 20 个空格。

在使用 Node 内置的 fs 模块处理文件时，我们会将所有图标保存在与本脚本相同的文件夹中，并嵌套在名为 icons 的文件夹中，然后在脚本启动前使用 fs.rm() 删除任何现有图标，接着使用 fs.mkdir() 创建目录。

除了使用我们之前创建的 HTTP 提供者管理我们的速率限制外，我们还使用 p-limit 将我们的承诺限制为 20 个并发。然后，当我们映射组件列表时，我们将在 limit 实例中封装下载每个资产的函数：

请注意，我们还传入了用于跟踪进度的 assetsBar，它将在每次迭代后运行方法 tick()。

以下是节目的全部内容：

在代码的最后，我们将调用程序的解析方法来解析命令行参数，并根据提供的选项执行定义的操作。让我们在命令行中试试我们的程序。

这将为样式表中 ID 为 “12345678”、名称以 “ico ”开头的组件下载 1x 和 2x 密度的 png 和 svg 图像。