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"
}
}
通过以上配置文件,可以实现插件的构建、打包和发布。