跳到主要內容

開始使用

專案結構

在 GitHub 上編輯此頁面

典型的 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 和 .eslintrc.cjs 等，如果您在執行 npm create svelte@latest 時選擇這些選項）。

專案檔案

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 隨機數
    • %sveltekit.env.[NAME]% - 這將在呈現時以 [NAME] 環境變數替換，該變數必須以 publicPrefix (通常為 PUBLIC_) 開頭。如果未匹配，它將回退到 ''。
  • error.html 是在其他所有情況都失敗時呈現的頁面。它可以包含下列佔位符
    • %sveltekit.status% — HTTP 狀態
    • %sveltekit.error.message% — 錯誤訊息
  • hooks.client.js 包含您的用戶端 hooks
  • hooks.server.js 包含您的伺服器 hooks
  • 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。

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

svelte.config.js

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

tsconfig.json

此檔案（或 jsconfig.json，如果您偏好類型檢查 .js 檔案而非 .ts 檔案）會設定 TypeScript，如果您在 npm create svelte@latest 期間加入類型檢查。由於 SvelteKit 依賴某些設定以特定方式設定，因此它會產生其自己的 .svelte-kit/tsconfig.json 檔案，您的設定檔會「延伸」此檔案。

vite.config.js

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

其他檔案

.svelte-kit

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

先前 建立專案
下一頁 網頁標準