SVGO Compressor 插件使用教程

1. 项目的目录结构及介绍

SVGO Compressor 插件的目录结构如下：

svgo-compressor/
├── assets/
├── src/
├── appcast.xml
├── .gitignore
├── .nvmrc
├── LICENSE.md
├── README.md
├── package-lock.json
├── package.json
├── webpack.skpm.config.js

目录介绍

• assets/: 存放项目所需的资源文件。
• src/: 存放项目的源代码文件。
• appcast.xml: 更新信息文件。
• .gitignore: Git 忽略文件配置。
• .nvmrc: Node.js 版本配置文件。
• LICENSE.md: 项目许可证文件。
• README.md: 项目说明文档。
• package-lock.json: npm 依赖锁定文件。
• package.json: 项目依赖和脚本配置文件。
• webpack.skpm.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

SVGO Compressor 插件的启动文件主要是 src/manifest.json 和 src/my-command.js。

src/manifest.json

该文件是插件的清单文件，包含了插件的基本信息和命令配置。

{
  "name": "SVGO Compressor",
  "identifier": "com.example.sketch.svgo-compressor",
  "commands": [
    {
      "name": "Compress SVG",
      "identifier": "compress",
      "script": "./my-command.js"
    }
  ]
}

src/my-command.js

该文件是插件的主要执行脚本，负责处理 SVG 文件的压缩逻辑。

import SVGO from 'svgo';

export default function(context) {
  const svgo = new SVGO();
  // 压缩逻辑
}

3. 项目的配置文件介绍

SVGO Compressor 插件的配置文件主要是 webpack.skpm.config.js 和 package.json。

webpack.skpm.config.js

该文件是 Webpack 的配置文件，用于打包和构建插件。

module.exports = (config, entry) => {
  config.module.rules.push({
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env']
      }
    }
  });
  return config;
};

package.json

该文件包含了项目的依赖和脚本配置。

{
  "name": "svgo-compressor",
  "version": "1.0.0",
  "description": "A Plugin that compresses SVG assets using SVGO right when you export them",
  "main": "src/my-command.js",
  "scripts": {
    "build": "skpm-build",
    "watch": "skpm-build --watch",
    "publish": "skpm-publish"
  },
  "dependencies": {
    "svgo": "^2.3.0"
  },
  "devDependencies": {
    "@skpm/builder": "^0.7.0"
  }
}

通过以上配置文件，可以实现插件的构建、打包和发布。