npm 包 skpm 使用教程

简介

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


猜你喜欢

  • npm 包 @purtuga/esm-webpack-plugin 使用教程

    现代 Web 开发中,前端模块化已经成为了基础。ES Module 规范是目前大家都认同的一种模块化方案,实现了标准化的模块加载、导出方式。随着 ESM 的不断普及,Webpack 也将 ESM 纳入...

    4 年前
  • NPM 包 @types/serialize-error 使用教程

    在前端开发中,我们常常会遇到多种类型的错误。为了更好的处理错误信息并且提高代码的可读性,我们可以使用 @types/serialize-error 这个 NPM 包来帮助我们。

    4 年前
  • npm 包 humio 使用教程

    简介 Humio 是一个面向日志的分布式搜索和分析平台,可以帮助开发人员更快地识别 bug 和故障,并提高运行时效率。npm 包 humio 是 Humio API 的 Node.js 绑定,可以帮助...

    4 年前
  • npm 包 @codechecks/build-size-watcher 使用教程

    简介 @codechecks/build-size-watcher 是一个基于 NPM 包的前端构建时大小监控工具。它能够帮助开发人员实时监控应用程序打包大小,及时发现代码中的潜在问题,并提供可用于解...

    4 年前
  • npm 包 @codechecks/ban-deps-codecheck 使用教程

    1. 什么是 @codechecks/ban-deps-codecheck @codechecks/ban-deps-codecheck 是一个基于 npm 包检查的静态代码分析工具,可以在自动化代码...

    4 年前
  • npm 包 @codechecks/client 使用教程

    前言 在当今这个快速发展的互联网时代,前端开发已成为各个企业必不可少的一项技术。而在前端开发过程中,本地代码的构建和代码质量的保证显得尤为重要。由此引出本篇文章的主题—— @codechecks/cl...

    4 年前
  • npm 包 @oclif/fixpack 使用教程

    在前端开发过程中,我们经常需要使用 npm 包来管理和扩展项目的功能。其中,@oclif/fixpack 是一个优秀的 npm 包,它可以帮助我们自动化地调整 package.json 文件中的排列顺...

    4 年前
  • npm 包 sort-pjson 使用教程

    前言:在前端开发中,经常需要用到 package.json 文件来管理项目的依赖,其中的 dependencies 和 devDependencies 字段需要按照特定的格式进行书写,否则可能会导致安...

    4 年前
  • npm 包 @types/yosay 使用教程

    在前端开发中,我们经常需要使用很多第三方 JavaScript 库来帮助我们完成工作。而这些库中很多都是通过 npm 来管理和发布的。在使用这些库时,我们通常需要使用类型声明文件来帮助我们做类型检查和...

    4 年前
  • npm 包 apib-include-directive 使用教程

    在前端开发中,API 文档是必不可少的一部分,但是当 API 文档随着项目的开发不断变化时,维护起来会变得困难。而 apib-include-directive 这个 npm 包,可以帮助我们更轻松地...

    4 年前
  • npm 包 drafter.js 使用教程

    在前端开发中,文档的编写和维护是非常重要的一环。而 drafter.js 是一个非常优秀的工具,它可以将 API 设计文件转换成可以在不同文档形式中使用的 JSON 或 YAML 格式。

    4 年前
  • npm 包 aglio-theme-olio 使用教程

    介绍 在前端开发中,我们往往需要通过各种工具将我们编写的代码转化为漂亮的文档以便于后续的维护和协作。而 Aglio 就是一个非常好用的将 API Blueprint 转换为漂亮 HTML 文档的工具。

    4 年前
  • npm 包 drafter 使用教程

    在前端开发中,接口文档的编写和维护是一项必要的工作。但是传统的编写方式费时费力,专门有人来更新接口文档显然不太合适。因此,我们可以选择一些工具来帮助我们自动生成接口文档。

    4 年前
  • npm 包 gce-images 使用教程

    前言 随着互联网技术的不断发展,前端工程师需要考虑的东西越来越多,其中一个重要的方面就是图片的处理和优化。在这个领域,有一款非常优秀的 npm 包:gce-images。

    4 年前
  • npm 包 vue2-ace-editor 使用教程

    前言 本文介绍了一个前端开发中常用的 npm 包 vue2-ace-editor 的使用方法。vue2-ace-editor 是一个基于 Vue 的 Ace 编辑器组件,支持语法高亮、代码折叠、代码提...

    4 年前
  • npm 包 better-docs 使用教程

    简介 better-docs 是一个简单易用的 npm 包,它可以帮助前端开发者更方便地生成项目文档。使用 better-docs 可以将你的项目中的注释转换为漂亮的文档页面,生成的文档页面包含了你的...

    4 年前
  • npm 包 @reallyland/tslint-config 使用教程

    在前端开发中常常需要使用 lint 工具来确保代码的质量和一致性,其中 TSLint 是 TypeScript 的 lint 工具。@reallyland/tslint-config 是一个 TSLi...

    4 年前
  • 前端必备神器:npm包mktmp使用教程

    在前端开发中,为了方便快捷地测试和处理代码,我们经常需要生成临时文件或文件夹。而在这个过程中,我们可以使用mktmp这个快捷而强大的npm包。 mktmp简介 mktmp是一个轻量级的npm包,提供了...

    4 年前
  • npm 包 npm-auto-version 使用教程

    npm 作为前端开发必备工具之一,其包管理功能尤其重要。如果有多个人参与同一个项目,在每个人修改代码后手动更新版本号就会显得十分繁琐,此时使用 npm-auto-version 这款 npm 包就能够...

    4 年前
  • npm 包 rollup-plugin-tslint 使用教程

    在前端开发中,rollup 是一款常用的 JavaScript 模块打包工具。而 rollup-plugin-tslint 则是一个支持在 rollup 中使用 TSLint 检查 TypeScrip...

    4 年前

相关推荐

    暂无文章