npm 包 skpm 使用教程

阅读时长 4 分钟读完

简介

skpm 是一款为 Sketch 插件开发者准备的 npm 包,它能为我们提供一些便利的工具和接口,使我们可以更好地开发 Sketch 插件。

本文将从安装、创建、运行和发布 skpm 插件等方面为大家介绍 skpm 的使用方法。

安装

在开始使用 skpm 之前,我们需要先安装它。我们可以通过以下命令来安装 skpm:

创建新插件

在安装了 skpm 后,我们可以通过以下命令来创建一个新的 Sketch 插件:

这个命令将会生成一个名为 my-plugin 的文件夹,其中包含了一个简单的空插件和开发所需的基本结构。

my-plugin 目录下执行以下命令可以启动插件的默认 UI:

此时 Sketch 应该会弹出一个窗口,启动了空白的 my-plugin 插件,并在 Sketch 中创建了 my-plugin 项目。

开发

在开发插件的过程中,我们需要编辑插件项目中的代码。插件代码可以在 src 目录下找到。我们可以通过修改 src 目录下的代码以及 manifest.json 文件来完成插件的开发。

UI 开发

在插件开发过程中,UI 开发非常重要。在 skpm 中,我们可以使用 React 来进行 UI 开发。要使用 React,我们需要在 src 目录下新建一个 ui 目录,并在其中创建 React 组件。

在组件中,我们可以使用 skpm 提供的一些接口和工具来实现 Sketch 插件的 UI。例如,我们可以使用 sketch 对象来获取当前 Sketch 文档,使用 settings 对象来保存和读取用户设置,等等。

API 开发

与 UI 开发相对应的是 API 开发。在 skpm 中,我们可以使用 Sketch 提供的 API 和 skpm 独有的 API 来进行 API 开发。我们可以使用 sketch 对象来操控 Sketch 文档、图层等,使用 context 对象来获取插件上下文并进行操作,等等。

运行

在完成插件开发后,我们需要对插件进行测试。我们可以使用以下命令来运行插件:

此时 Sketch 应该会启动,并自动运行插件。

发布

在完成测试后,我们可以将插件发布到 Sketch 插件市场上。我们可以使用以下命令来打包插件:

这个命令将会在插件项目中生成一个名为 my-plugin.sketchplugin 的文件,我们可以将这个文件发布到 Sketch 插件市场上。

示例代码

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

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

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

这段代码创建了一个名为 My Artboard 的画板,并在画板上绘制了一段 Hello World! 文本以及一个渐变色块。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f406837dbf7be33b25671fd

纠错
反馈