Svelte Add快速入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00911/article/details/142010555

Svelte Add快速入门指南

svelte-addEasily add integrations and other functionality to Svelte apps项目地址:https://gitcode.com/gh_mirrors/sv/svelte-add

Svelte Add 是一个致力于简化 Svelte 和 SvelteKit 应用程序中功能集成过程的工具集。它通过提供一系列“添加器”(adders)，允许开发者互动式地向项目添加新功能，如样式库、测试框架、路由等，无需手动进行复杂的设置。

1. 项目目录结构及介绍

Svelte Add 的核心项目本身可能并不直接展示一个典型的应用目录结构，因为它主要由一系列的工具包和脚手架组成。但是，当你在自己的项目中使用 Svelte Add 后，产生的影响将反映在你的项目里，增加或修改特定的文件和目录。一般情况下，应用可能会引入以下结构变化：

node_modules/@svelte-add：这里存放着通过 Svelte Add 添加的具体功能包。
src：如果你添加了如Storybook这样的功能，可能会在src下新增对应的配置或组件目录。
.svelte-add/config.js（假设存在）：这是用于定制Svelte Add行为的配置文件，尽管不是默认必需的，但某些场景下会有此配置文件来指导如何应用加者。
package.json：添加的功能通常会向这个文件中添加依赖项以及脚本命令。

2. 项目的启动文件介绍

Svelte Add 不直接控制项目的启动逻辑，而是间接通过修改或添加到你的项目中的package.json脚本或者创建特定的启动脚本来影响应用程序的启动方式。例如，若添加Vitest测试框架，会在package.json中添加测试相关的脚本命令，常见的可能是 test 或 vitest 命令。

示例启动命令：

在大多数Svelte或SvelteKit应用中，标准的启动流程是通过npm或yarn命令执行，例如：

"scripts": {
    "start": "svelte-kit dev",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview"
}

添加新的功能后，可能会有额外的命令，比如对于测试：

"scripts": {
    ...,
    "test": "vitest run"
}

3. 项目的配置文件介绍

Svelte Add 主要通过其自身工具或添加的功能模块来建议或修改特定的配置。配置变动通常发生在以下几个方面：

svelte.config.js: 若添加的功能需要对编译过程做特殊处理，可能会在这里添加或调整配置选项。
vitest.config.js, jest.config.js（取决于所选测试库）：当添加测试相关功能时，这些文件会出现或被更新以适应新的测试框架配置。
tailwind.config.js: 假设添加了Tailwind CSS，项目中会包含该配置文件来定制Tailwind的行为。
mdsvex.config.js: 添加mdsvex后，会生成此配置文件以支持Svelte语法在Markdown中的使用。