在前端开发中，经常需要将设计师设计好的样式转换成开发代码。而 Sketch 是很多设计师使用的工具，它可以导出成 Sketch JSON 格式文件，我们可以通过 @brainly/html-sketchapp 这个 npm 包将 Sketch JSON 转换成可以直接使用的代码，本文将详细介绍如何使用该 npm 包。
安装
npm install @brainly/html-sketchapp
使用
- 准备 Sketch JSON 文件
首先需要从 Sketch 中导出 Sketch JSON 文件。在 Sketch 中，选择 File > Export > Export to JSON 即可导出文件。导出后的文件结构大致如下：
-- -------------------- ---- -------
-
----------- -
-------------- -
-- ---
--
--------------- -
-- ---
--
-------- -
-
------- --------- ---
--------- -
-
---- --
---- --
-------- ----
--------- ----
-------- -
-------- ------
---------- ------
-- ---
--
------- ------------
-- ---
--
--
-- ---
--
-- ---
--
-- ---
--
-- ---
-- 转换成 HTML 代码
接下来，我们可以使用 @brainly/html-sketchapp 这个 npm 包将 Sketch JSON 转换成 HTML 代码。首先导入包和准备数据：
const { renderToHTML } = require('@brainly/html-sketchapp');
const sketchData = require('./path/to/sketch.json'); // 导入 Sketch JSON 文件然后执行转换：
const html = renderToHTML(sketchData);
现在，html 就是生成的 HTML 代码。
- 转换成 React 组件
除了转换成 HTML，我们也可以使用 @brainly/html-sketchapp 将 Sketch JSON 转换成 React 组件。首先导入包和准备数据：
const { renderToComponent } = require('@brainly/html-sketchapp/react');
const sketchData = require('./path/to/sketch.json'); // 导入 Sketch JSON 文件然后执行转换：
const component = renderToComponent(sketchData);
现在，component 就是生成的 React 组件。
示例代码
下面是一个简单的例子，假设我们有一个 Sketch JSON 文件，其中只包含了一个红色背景的矩形，我们可以使用 @brainly/html-sketchapp 将其转换成 HTML 代码：
-- -------------------- ---- -------
----- - ------------ - - -----------------------------------
----- ---------- - -
----------- -
-------- -
-
------- --------- ---
--------- -
-
---- --
---- --
-------- ----
--------- ----
-------- -
-------- -
-
-------- -
------ --
-------- --
------- --
-------- -
-
-
--
--
------- -----------
-
-
-
-
-
--
----- ---- - -------------------------
------------------
-- ------- -------------------------------------------------------------------------该示例代码将 Sketch JSON 文件转换成了一个红色背景的 <div> 元素。
总结
在本文中，我们介绍了 @brainly/html-sketchapp 这个 npm 包的使用方法，通过该包我们可以将 Sketch JSON 文件转换成可以直接使用的 HTML 代码和 React 组件。使用该包可以有效地促进设计师和开发者之间的沟通，加速产品开发过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f4065dfdbf7be33b25671f8