Figsvelte 开源项目教程

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

Figsvelte 是一个用于创建 Figma 插件的 Svelte 模板。以下是项目的目录结构及其简要介绍：

figsvelte/
├── public/                # 公共文件夹，包含插件清单文件
│   └── manifest.json       # Figma 插件清单文件
├── src/                   # 源代码文件夹
│   ├── components/        # Svelte 组件
│   ├── styles/            # 样式文件
│   └── Plugin.svelte      # 插件主界面文件
├── .gitattributes          # 定义如何处理特定文件的 Git 属性
├── .gitignore             # 定义 Git 忽略的文件和目录
├── LICENSE                # 项目许可证文件
├── README.md              # 项目自述文件
├── package-lock.json       # npm 依赖锁定文件
├── package.json           # 项目包配置文件
└── rollup.config.js        # Rollup 打包配置文件

• public/：包含插件的清单文件 manifest.json，这是 Figma 插件的核心配置文件。
• src/：存放所有源代码，包括 Svelte 组件、样式文件以及插件的主界面文件 Plugin.svelte。
• .gitattributes：指定如何对待项目中的特定文件类型。
• .gitignore：列出不应该被版本控制系统跟踪的文件和目录。
• LICENSE：项目的开源许可证。
• README.md：项目的说明文件，提供了项目的基本信息和如何使用它的指南。
• package-lock.json 和 package.json：npm 依赖管理文件，用于管理项目的依赖关系。
• rollup.config.js：使用 Rollup 打包工具的配置文件。

2. 项目的启动文件介绍

在 Figsvelte 项目中，启动开发服务器主要是通过 package.json 文件中定义的 npm 脚本实现的。

以下是一些关键的启动命令：

• npm install：安装项目依赖。
• npm run dev：启动本地开发服务器，并监视源代码的更改，实时重新构建插件。

在开发模式下，你应该编辑 src/Plugin.svelte 文件来构建你的插件界面。

3. 项目的配置文件介绍

项目的配置主要集中在以下几个文件：

• manifest.json：这是 Figma 插件的核心配置文件，它定义了插件的名称、描述、权限等信息。你需要在 Figma 插件开发界面中链接这个文件。
• package.json：这个文件定义了项目的依赖和脚本。它包含了启动开发服务器和构建生产版本的脚本。
• rollup.config.js：这个文件是 Rollup 打包工具的配置文件，用于定义如何打包项目源代码，包括哪些文件应该被包括在最终构建中。

通过修改这些配置文件，你可以自定义项目的行为，以满足你的开发需求。