由於 SvelteKit 使用基於目錄的路由，因此很容易將模組和元件放置在使用它們的路由旁邊。一個好的經驗法則是「將程式碼放置在靠近使用它的地方」。
有時，程式碼會在多個地方使用。當發生這種情況時，最好有一個地方可以放置它們，以便所有路由都可以存取它們，而無需在匯入時加上 ../../../../ 前綴。在 SvelteKit 中，這個地方是 src/lib 目錄。此目錄中的任何內容都可以透過 $lib 別名從 src 中的任何模組存取。
在此練習中，兩個 +page.svelte 檔案都匯入了 src/lib/message.js。但是，如果您導覽到 /a/deeply/nested/route，應用程式會中斷，因為我們的前綴寫錯了。請將其更新為改用 $lib/message.js
src/routes/a/deeply/nested/route/+page
<script>
import { message } from '$lib/message.js';
</script>
<h1>a deeply nested route</h1>
<p>{message}</p>對 src/routes/+page.svelte 執行相同的操作
src/routes/+page
<script>
import { message } from '$lib/message.js';
</script>
<h1>home</h1>
<p>{message}</p>上一步 下一步
1
2
3
4
5
6
<script>
import { message } from '../lib/message.js';</script>
<h1>home</h1>
<p>{message}</p>