简介
skpm 是一款为 Sketch 插件开发者准备的 npm 包,它能为我们提供一些便利的工具和接口,使我们可以更好地开发 Sketch 插件。
本文将从安装、创建、运行和发布 skpm 插件等方面为大家介绍 skpm 的使用方法。
安装
在开始使用 skpm 之前,我们需要先安装它。我们可以通过以下命令来安装 skpm:
npm install -g skpm
创建新插件
在安装了 skpm 后,我们可以通过以下命令来创建一个新的 Sketch 插件:
skpm create my-plugin
这个命令将会生成一个名为 my-plugin
的文件夹,其中包含了一个简单的空插件和开发所需的基本结构。
在 my-plugin
目录下执行以下命令可以启动插件的默认 UI:
npm run start
此时 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
对象来获取插件上下文并进行操作,等等。
运行
在完成插件开发后,我们需要对插件进行测试。我们可以使用以下命令来运行插件:
npm run test
此时 Sketch 应该会启动,并自动运行插件。
发布
在完成测试后,我们可以将插件发布到 Sketch 插件市场上。我们可以使用以下命令来打包插件:
npm run build
这个命令将会在插件项目中生成一个名为 my-plugin.sketchplugin
的文件,我们可以将这个文件发布到 Sketch 插件市场上。
示例代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- ----- ------ -------- - ---- --------- ------ ------- -------- -- - ----- --- - ----------------------------- ----- ---- - ----------------- ----- -------- - --- ---------- ----- --- ---------- ------- ----- ------ --- ------------ -- ---- ----- --- ------- ---------- ----- ------------------ -------- -- -- -- --- ------ ---- ------- -- -- - ----- ------ ------- ------ ----------- -------- - --------- -- ------ ------ -- - --------- -- ------ ------ -- -- -- ------------ -- -
这段代码创建了一个名为 My Artboard
的画板,并在画板上绘制了一段 Hello World!
文本以及一个渐变色块。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f406837dbf7be33b25671fd