npm 包 storybook-addon-sketch 使用教程-JavaScript中文网-JavaScript教程资源分享门户

背景

在前端开发过程中，有时候需要配合UI设计师将设计稿转化为页面，而设计稿可能是使用 Sketch 工具绘制的。传统的开发流程排版、调整页面，然后将页面截图发回给UI设计师，等待其反馈，这个流程比较繁琐，难以做到快速迭代。因此，一些前端工程师就想到了将 Sketch 工具和前端流程结合起来。

介绍

storybook-addon-sketch 是一个可以在 Storybook 中集成 Sketch 工具的插件。Sketch 工具可直接嵌入 Storybook 中，方便开发人员直观地查看设计稿，并可以直接在 Storybook 中进行页面的修改。

storybook-addon-sketch 可以作为一个独立的 npm 包使用。使用时在项目中安装该包并按照下面的使用说明进行配置即可。

安装

使用 npm 安装 storybook-addon-sketch：

npm install --save-dev storybook-addon-sketch

使用

在 .storybook/addons.js 文件中引入 storybook-addon-sketch：

import 'storybook-addon-sketch/register';

在 Storybook 定义的故事种类中加入一个名为 "Sketch" 的decorator：

import { storiesOf } from '@storybook/react';
import { withSketch } from 'storybook-addon-sketch';

storiesOf('Button', module)
  .addDecorator(withSketch)
  .add('toggle button', () => <button>Button</button>);

可以在 .storybook 目录下，创建一个名为 addons.js 的配置文件，用于一次性引入所有自定义的 addons

将你的 Sketch 设计稿上传至 Storybook：

上传到 Storybook 系统中：
```
npx sb sketch
```
在 Storybook 中上传完成后，Sketch 对象将出现在 Storybook 中的预览画面上，每个 Sketch 对象上将有查看、下载源文件以及删除等操作
上传到在线文档系统或者公司其他文档管理中：

在你的 Sketch 设计稿页面中，添加 artboard name 信息，可以将 Sketch 设计稿同步到对应的在线文档系统或者公司其他文档管理平台。使用Sketch2Doc等工具可以实现同步。

配置

storybook-addon-sketch 需要配置以编写自定义插件。下面是完整定义的配置示例：

-- -------------------- ---- -------
------ - --------- - ---- -------------------
------ - ---------- - ---- ----------------------------------

----- ------------ - -
  ----- ---------
  -------- ---------------------------------
  ------- -------- -- -
    ------ ------------------------------------------ -
      ------- -------
      ----- -----------------------
    ---
  --
  --------- ----------- -- -
    ------ ---------------- - ----- --------- ------------------ -- -
      ------ ----------------
    ---
  -
--

------------ -- -
  ---------------------------------------
-- --------

API

`withSketch(options?)`

将一个开箱即用的 Sketch 制作控件注册到 Storybook 中的 decorator 。返回一个包含 Sketch 的组件。

可以通过传入参数对如下参数进行配置：

name : string - Sketch UI 中的组件名称
apiHost: string - Sketch APIs server URL
upload: (params) => Promise - 上传 Sketch 文件到其他 URL 或第三方上传服务
download: (sketchUrl) => Promise<blo> - 从 Sketch 系统中获取对应的 Sketch 文件

如果不提供任何配置参数，则默认使用 storybook-addon-sketch 自身的默认配置。

注意：如果您想更改每个 Sketch 组件的默认设置，您必须在模块的开头定义 STORYBOOK_ADDONS_SKETCH__OPTIONS 常量，它应是一个对象，其属性将覆盖默认设置。

withSketch 可以和其他 decorator 一起使用来构建具有更多不同功能的 Storybook 组件。

示例

见下方代码块，一个简单的 Storybook 组件：

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - --------- - ---- -------------------
------ - ---------- - ---- ----------------------------------

----- ------ ------- --------- -
  -------- -
    ------ ------- --------------------------------------------
  -
-

------------------- -------
  -------------------------
  ---------- ------ -- -- -
    ------- ------------ ------- ----------- -- ------------------------ --
  --

上面代码将 Button 组件作为 Storybook 中的故事，并将withSketch decorator 应用于它。最终在 Storybook 中显示的 Sketch 对象将显示该组件的设计稿，每个 Sketch 对象上将有查看、下载源文件以及删除等操作。

总结

使用 storybook-addon-sketch，可以方便地将 Sketch 设计稿集成到 Storybook 中，有助于快速迭代和开发效率的提升。本文详细介绍了该包的使用方法和相关配置信息，相信读者已经可以快速上手并开始试用了。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f406130dbf7be33b25671f5