创建插件
您可以通过两种方式创建插件
为了快速入门，Sketch 插件管理器提供了一组针对不同类型插件的模板，包括数据提供者和使用 webview 提供用户界面的插件。
1. 使用 skpm
要求
您需要安装 npm 来安装 skpm 以及 Sketch 插件的任何依赖项。
安装 skpm
使用 npm 安装 Sketch 插件管理器。
npm install -g skpm
查看使用说明以查看所有可用命令。
skpm --help
从模板创建
使用默认插件在磁盘上的任何位置创建一个新插件。 skpm 将自动向 Sketch 插件安装文件夹添加符号链接，以使插件在 Sketch 中立即可用。
skpm create my-plugin
生成的文件夹包含插件源代码和生成的 Sketch 插件包。当您对文件夹结构进行更改时，请确保根据需要调整 package.json 中的 skpm 设置。
.
├── README.md
├── assets
│ └── icon.png
├── my-plugin.sketchplugin
│ └── Contents
│ ├── Resources
│ │ └── icon.png
│ └── Sketch
│ ├── manifest.json
│ ├── my-command.js
│ └── my-command.js.map
├── node_modules
├── package-lock.json
├── package.json
└── src
├── manifest.json
└── my-command.js
| 文件夹 | 描述 |
|---|---|
*.sketchplugin |
由 skpm 构建过程生成的插件包。不要编辑此文件夹中的任何文件，任何更改都将在下次构建时被覆盖。 |
assets |
应与插件捆绑在一起的任何资源文件的文件夹。要使用其他路径或添加文件夹，请修改 package.json 中的 skpm.assets 设置。 |
src |
包含 清单 和要使用 webpack 捆绑在一起的脚本的源代码文件夹。 |
切换到 Sketch 并从“插件”菜单运行插件。
快速提示：有关其他模板，请参阅
skpm文档。
构建插件包
对插件源代码进行更改后，您需要重新构建 .sketchplugin 包。用以下脚本替换 src/my-command.js 的内容。
import sketch from 'sketch'
export default function() {
const doc = sketch.getSelectedDocument()
const selectedLayers = doc.selectedLayers
const selectedCount = selectedLayers.length
if (selectedCount === 0) {
sketch.UI.message('No layers are selected.')
} else {
sketch.UI.message(`${selectedCount} layers selected.`)
}
}
使用 npm 构建插件。
npm run build
要验证插件是否已更新，请创建或打开 Sketch 文档并选择一些图层。当您再次从“插件”菜单运行插件时，您现在应该看到包含选定图层数量的消息。
快速提示：通过运行
npm run watch而不是npm run build来在更改后自动重新构建插件。
2. 手动
如果您希望使用自己的方法来捆绑插件，则必须确保正确定义清单并包含插件运行所需的全部脚本。
示例
此示例插件包含两个 JavaScript 文件；command.js 定义了在 Sketch 中选择插件的菜单项时调用的处理程序，而 shared.js 包含使用 require 由 command.js 导入的代码。
.
└── Contents
├── Resources
└── Sketch
├── command.js
├── manifest.json
└── shared.js
manifest.json
清单文件告诉 Sketch 如何从“插件”菜单运行插件。有关选项的完整列表，请参阅 清单文档。
{
"author": "",
"commands": [
{
"script": "command.js",
"name": "Greeting",
"handlers": {
"run": "onRun"
},
"identifier": "messages.greeting"
}
],
"menu": {
"title": "Message…",
"items": ["messages.greeting"]
},
"identifier": "com.bohemiancoding.sketch.messages",
"version": "1.0",
"description": "An introduction on how to build plugins.",
"authorEmail": "[email protected]",
"name": "Messages"
}
command.js
const sketch = require('sketch')
const { randomEmoji } = require('./shared')
var onRun = function(context) {
sketch.UI.message(`Hello Sketch ${randomEmoji()}`)
}
shared.js
let emojis = ['👋', '💎', '🛠', '🎉']
const randomEmoji = () => {
return emojis[Math.floor(Math.random() * emojis.length)]
}
module.exports = {
randomEmoji,
}
运行插件
将您的插件放置在 插件位置，一旦位于那里，您就可以从 Sketch 中的插件菜单手动运行插件。
或者，如果您在命令行上很熟练，可以使用
sketchtool运行插件。
后续步骤
详细了解如何调试插件以及如何使它们对其他人可用。
