背景
在前端开发过程中，有时候需要配合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 URLupload: (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