作为前端工程师，我们经常需要设计界面原型或给设计师提供反馈意见，而常常使用到的软件就是 Sketch。但 Sketch 并不便宜，而且很难操作。这时候，一个名为 esketch 的 npm 包就可以派上用场了。
什么是 esketch
esketch 是一个基于 sketch-styles-dictionary 和 sketch-json-api 的 npm 包，它可以让你快速的将 Sketch 设计文件转化为 json 格式的复合组件模块，然后你就可以轻松精准地将这些模块应用到任何为 React, Vue 或 Angular 等框架编写的项目中。
安装 esketch
使用 esketch 之前，需要确保你有安装 Sketch 设计软件，同时还要安装 node.js。然后在命令行中运行以下命令：
--- ------- -- -------
使用 esketch 的例子
- 创建一个 Sketch 编辑文件，选择一些图标等组件，并将它们分组成一个复合的组件。
- 运行以下命令：
------- --------------------------- ----- ----------------------
- 检查输出文件夹，其中应该会包含两个新文件：
- 一个 JSON 文件，包含了分组的组件。
- 一个样式表（.css），包含所有 Sketch 中使用的样式。
- 在你的项目中，使用
loadComponentsFromFolder方法载入 JSON 文件，如下所示：
------ - ------------------------ - ---- ---------- ----- ---------- - ---------------------------------------------------
- 现在，你就可以在你的项目中使用组件了。例如：
------ ----- ---- -------- ------ - ------ - ---- ------------------------------ -------- ----- - ------ ------------- ------------ -
给组件添加样式
esketch 已经为我们将样式文件输出到了样式表（.css）中，我们只需要将其引入即可：
------ -------------------------------------
然后就可以在你的组件中使用样式了：
------ ----- ---- --------
------ - ------ - ---- ------------------------------
------ -------------------------------------
-------- ----- -
------ -
-----
------- ------------------------- -----------
------- -------------------------------------
------
--
-总结
esketch 使得前端工程师可以轻松地将 Sketch 设计文件中的组件应用到 React、Vue、Angular 等框架中。而且，esketch 提供了可供扩展的接口和丰富的文档资料，方便我们根据自己的需要进行二次开发和调试。它大大提高了前端工作的效率，让前端开发变得更加简单而轻松。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056d1881e8991b448e6e67