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

作为前端工程师，我们经常需要设计界面原型或给设计师提供反馈意见，而常常使用到的软件就是 Sketch。但 Sketch 并不便宜，而且很难操作。这时候，一个名为 esketch 的 npm 包就可以派上用场了。

什么是 esketch

esketch 是一个基于 sketch-styles-dictionary 和 sketch-json-api 的 npm 包，它可以让你快速的将 Sketch 设计文件转化为 json 格式的复合组件模块，然后你就可以轻松精准地将这些模块应用到任何为 React, Vue 或 Angular 等框架编写的项目中。

安装 esketch

使用 esketch 之前，需要确保你有安装 Sketch 设计软件，同时还要安装 node.js。然后在命令行中运行以下命令：

npm install -g esketch

使用 esketch 的例子

创建一个 Sketch 编辑文件，选择一些图标等组件，并将它们分组成一个复合的组件。
运行以下命令：

esketch /path/to/sketch/file.sketch --out /path/to/output/folder

检查输出文件夹，其中应该会包含两个新文件：

一个 JSON 文件，包含了分组的组件。
一个样式表（.css），包含所有 Sketch 中使用的样式。

在你的项目中，使用 loadComponentsFromFolder 方法载入 JSON 文件，如下所示：

import { loadComponentsFromFolder } from "esketch";
const components = loadComponentsFromFolder("/path/to/output/folder");

现在，你就可以在你的项目中使用组件了。例如：

import React from "react";
import { Button } from "./path/to/loaded/components";

function App() {
  return <Button>Click Me</Button>;
}

给组件添加样式

esketch 已经为我们将样式文件输出到了样式表（.css）中，我们只需要将其引入即可：

import "./path/to/output/folder/styles.css";

然后就可以在你的组件中使用样式了：

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

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

总结

esketch 使得前端工程师可以轻松地将 Sketch 设计文件中的组件应用到 React、Vue、Angular 等框架中。而且，esketch 提供了可供扩展的接口和丰富的文档资料，方便我们根据自己的需要进行二次开发和调试。它大大提高了前端工作的效率，让前端开发变得更加简单而轻松。

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