SvelteKit開始使用

專案結構

典型的 SvelteKit 專案看起來像這樣

my-project/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [your server-only lib files]
│ │ └ [your lib files]
│ ├ params/
│ │ └ [your param matchers]
│ ├ routes/
│ │ └ [your routes]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ ├ hooks.server.js
│ └ service-worker.js
├ static/
│ └ [your static assets]
├ tests/
│ └ [your tests]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

您也會找到常見的檔案，例如 .gitignore 和 .npmrc（以及 .prettierrc 和 eslint.config.js 等，如果您在執行 npx sv create 時選擇了這些選項）。

專案檔案

src

src 目錄包含您的專案的核心。除了 src/routes 和 src/app.html 之外，所有內容都是可選的。

lib 包含您的程式庫程式碼（工具和元件），可以透過 $lib 別名匯入，或使用 svelte-package 打包以供發布
- server 包含您的僅限伺服器的程式庫程式碼。可以使用 $lib/server 別名匯入。SvelteKit 會阻止您在客戶端程式碼中匯入這些程式碼。
params 包含您的應用程式需要的任何參數匹配器
routes 包含您的應用程式的路由。您也可以在此處共同配置其他僅在單一路線內使用的元件
app.html 是您的頁面範本 — 包含以下佔位符的 HTML 文件
- %sveltekit.head% — 應用程式需要的 <link> 和 <script> 元素，以及任何 <svelte:head> 內容
- %sveltekit.body% — 呈現頁面的標記。這應該放在 <div> 或其他元素內，而不是直接放在 <body> 內，以防止瀏覽器擴充功能注入元素，然後被水合過程破壞所引起的錯誤。如果情況並非如此，SvelteKit 會在開發中警告您
- %sveltekit.assets% — 如果指定，則為 paths.assets，否則為 paths.base 的相對路徑
- %sveltekit.nonce% — 如果使用，則為手動包含的連結和腳本的 CSP nonce
- %sveltekit.env.[NAME]% - 這將在渲染時被替換為 [NAME] 環境變數，該變數必須以 publicPrefix（通常為 PUBLIC_）開頭。如果沒有匹配，則會回退為 ''。
error.html 是在其他所有內容都失敗時呈現的頁面。它可以包含以下佔位符
- %sveltekit.status% — HTTP 狀態
- %sveltekit.error.message% — 錯誤訊息
hooks.client.js 包含您的客戶端鉤子
hooks.server.js 包含您的伺服器鉤子
service-worker.js 包含您的服務工作者

（專案是否包含 .js 或 .ts 檔案取決於您在建立專案時是否選擇使用 TypeScript。您可以使用此頁面底部的切換開關在 JavaScript 和 TypeScript 之間切換。）

如果您在設定專案時加入了 Vitest，您的單元測試將位於 src 目錄中，並具有 .test.js 副檔名。

static

任何應該按原樣提供的靜態資產，例如 robots.txt 或 favicon.png，都放在這裡。

tests

如果您在設定專案時加入了 Playwright 進行瀏覽器測試，則測試將位於此目錄中。

package.json

您的 package.json 檔案必須包含 @sveltejs/kit、svelte 和 vite 作為 devDependencies。

當您使用 npx sv create 建立專案時，您也會注意到 package.json 包含 "type": "module"。這表示 .js 檔案會被解讀為具有 import 和 export 關鍵字的本機 JavaScript 模組。舊版 CommonJS 檔案需要 .cjs 檔案副檔名。

svelte.config.js

此檔案包含您的 Svelte 和 SvelteKit 組態設定。

tsconfig.json

如果您在 npx sv create 期間加入了類型檢查，此檔案（或 jsconfig.json，如果您偏好對 .js 檔案進行類型檢查而不是 .ts 檔案）會設定 TypeScript。由於 SvelteKit 依賴以特定方式設定的某些組態，因此它會產生自己的 .svelte-kit/tsconfig.json 檔案，您的組態會 extends 該檔案。

vite.config.js

SvelteKit 專案實際上只是一個 Vite 專案，它使用 @sveltejs/kit/vite 外掛程式，以及任何其他 Vite 組態設定。

其他檔案

.svelte-kit

當您開發和建置專案時，SvelteKit 會在 .svelte-kit 目錄中產生檔案（可組態為 outDir）。您可以忽略其內容，並隨時刪除它們（下次 dev 或 build 時會重新產生它們）。

在 GitHub 上編輯此頁面

建立專案網路標準