作为前端设计师，常常需要与设计人员紧密合作以获得最佳结果，而这就需要sketchapp来进行设计。Sketchapp是设计人员使用的一种设计软件，但与后端工作紧密结合的工作需要前端通过将设计转换为代码，将其变成网页，这不仅可以减少需求重复，同时也提高了技术团队的使用效率。
本文介绍的npm包sketchapp-json-flow-types，是其中一种将Sketchapp设计转换为可编辑json格式的工具，可以帮助我们将Sketchapp设计转换为代码，以支持我们在更多的前端工具中使用。本文将为您提供详细的学习指导，以及示例代码。
安装
使用npm包时，首先需要确保您已经安装了npm。首先，打开终端窗口，并输入以下命令：
npm install sketchapp-json-flow-types
这将开始下载一个名为sketchapp-json-flow-types的npm包，并将其安装在您的本地计算机中。
使用方法
安装完成后，您就可以按照以下步骤使用npm包：
1. 导出Sketch文件
打开Sketchapp，并从菜单中选择“File”>”Export…”，然后在弹出的窗口中选择“Flow（JSON）”格式，为您的设计选择一个输出位置。
2. 安装npm包，并将其导入到您的项目中
在Terminal或命令行中运行以下命令：
npm i --save sketchapp-json-flow-types
然后，在您的JavaScript文件中导入刚刚安装的npm包。为了导入并使用它，您可以在文件的顶部添加以下行：
import { parseSketchJSON } from 'sketchapp-json-flow-types';3. 转换Sketch文件为JSON
您需要将保存在Sketch文件中的数据转换为JSON格式，这可以通过调用parseSketchJSON函数来完成：
const jsonData = parseSketchJSON('/path/to/your/design.json');上面的代码中，“/path/to/your/design.json”应该是您在第1步中选择的Flow（JSON）文件的位置。该函数将读取该文件，并将Sketch文件转换为JSON格式。
4. 获取JSON文件的内容并生成代码
最后一步是生成代码，这可以通过访问JSON对象并为其生成代码来完成。这取决于您的具体用例，但这里是一个示例：
-- -------------------- ---- -------
----- ------- - --------------------
----- ---- - ---
--- ------ ------ -- -------- -
----- -------- - ----------------------------
--- ------ ------- -- --------- -
-- ------------- --- --------- -
---- -- ------ ------------- - --------------------------------------------
---- -- ------------------------ - --------------------
-
-- ---------
-
-
------------------上述代码将读取JSON对象的屏幕和元素，并为元素生成代码。根据您的需求进行适当的调整。
结论
sketchapp-json-flow-types是将sketchapp设计转化成JSON格式的工具，使前端人员可以更便捷的工作。通过阅读本文，您现在应该对如何使用这个npm包有了深入的了解，并且可以开始在您的项目中尝试使用它。同时，也要注意在使用过程中遵循Webpack等工具的标准规则。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3365c0dbf7be33b2566ddd