前言
前端开发人员想要编写 Sketch 插件，经常需要使用到 Sketch 插件开发工具包，即 Sketch Plugin Manager（skpm）。而对于 skpm 来说，@skpm/builder 是其中一个重要的 npm 包，用于构建 Sketch 插件。
本文旨在提供关于 @skpm/builder 的详细介绍，并提供一个简单的教程，指导读者如何使用它来进行 Sketch 插件开发。
什么是 @skpm/builder
@skpm/builder 是一个基于 Webpack 的工具，用于将 JavaScript、CSS 和图片等静态文件打包成一个 Sketch 插件。它负责将你编写的源代码编译为适合 Sketch 的 JavaScript 代码。
@skpm/builder 提供了一系列任务，包括编译源代码、压缩文件、监测代码变化，以及发布等功能。
如何安装 @skpm/builder
要安装 @skpm/builder，我们首先要创建一个新的 Sketch 插件项目。打开终端，输入以下命令：
skpm create my-plugin cd my-plugin
进入到项目文件夹后，使用以下命令安装 @skpm/builder：
npm install -D @skpm/builder
如何使用 @skpm/builder
@skpm/builder 依靠 webpack.config.js 来构建 Sketch 插件。该文件应该创建在项目根目录下。
创建 webpack.config.js 并输入以下代码：
-- -------------------- ---- -------
----- ---- - ---------------
-------------- - -
------ ----------------
------- -
--------- ---------------------------------------------------
----- -------------------- -------
--
----- ------------
-上述配置会将项目中的 src/main.js 文件作为入口，构建到 my-plugin.sketchplugin/Contents/Sketch/script.js 文件中。
接下来，我们需要更新 package.json 的 scripts 属性，以便自动调用 webpack。
打开 package.json 文件，添加以下内容：
"scripts": {
"build": "skpm-build"
},这里我们使用了 “skpm-build” 命令来代替直接运行 webpack 命令。
现在，只需要运行 npm run build，即可编译和压缩插件。
Sketch 插件的上传与发布
构建插件的最后一步是将它们发布到 Sketch 插件库中。这里我们需要在我们的 Sketch 插件的 GitHub 仓库中创建一个 release。
具体步骤如下：
在 GitHub 上找到你的 Sketch 插件仓库，并在导航栏中选择 “Releases”。
点击 “Draft a new release” 创建一个新的 version，并填写版本号和标题。
上传插件包，命名为 {插件名称}.{版本号}.{插件类型}。例如，my-plugin.0.0.1.sketchplugin。
发布 release，并填写 changelog。
推荐使用 sketchpacks 将插件添加到 Sketch 插件库中，并分享给更多的人。
示例代码
我们编写一个简单 plugin，帮助你更好地理解如何使用 @skpm/builder。
首先，创建一个文件夹，并初始化 Sketch 插件项目：
mkdir my-plugin && cd my-plugin skpm create .
在 Sketch 中创建一个矩形图层，并将其重命名为 “rectangle”。
接下来，创建 src/main.js 文件，输入以下代码：
-- -------------------- ---- -------
------ ------ ---- --------
------ ------------- ---- ------------------------
------ - ----- - ---- ------------
------ ------- -------- -- -
------------------------
----- ------- - -
----------- -----------------------
------ ----
------- ----
------------ ----
-
----- ------------- - --- ----------------------
-------------------------------------------------------
----------------------------------------------- -- -- -
-------------------- --------
--
-我们使用了 Sketch 官方提供的 UI 消息工具，并使用了 Sketch 模块中的 BrowserWindow 类创建了一个简单的 Web 浏览器视图。
接着，我们创建 src/hello.js 文件，输入以下代码：
export const title = 'Hello Sketch!'
最后，创建 index.html 文件，并输入以下代码：
<html>
<head>
<title>Hello Sketch Plugin</title>
</head>
<body>
<h3>Hello Sketch Plugin!</h3>
</body>
</html>在终端中，输入以下命令，构建插件：
npm run build
该命令会自动编译编写好的插件，并打包输出到 dist 目录下。
在 Sketch 中，安装插件并运行，即可看到插件已经在浏览器视图中成功运行。
总结
使用 @skpm/builder 构建 Sketch 插件是一项非常有意义的工作。它允许我们使用最新的前端技术和工具，以优美简洁的方式构建我们的插件。
本文提供了有关 @skpm/builder 的详细介绍，以及如何使用它来构建和发布一款 Sketch 插件的示例。希望读者在阅读本文后，可以基于此进行更进一步的工作和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2de77f3b0ab45f74a8bc03