部署和後續步驟

在上一篇文章中，我們學習了 Svelte 的 TypeScript 支援，以及如何使用它來使您的應用程式更加健壯。在本文的最後一篇文章中，我們將探討如何部署您的應用程式並將其上線，並分享一些您應該繼續學習 Svelte 的資源。

先決條件	至少，建議您熟悉核心 HTML、CSS 和 JavaScript 語言，並瞭解終端/命令列。您需要一個安裝了 node + npm 的終端來編譯和構建您的應用程式。
目標	學習如何準備我們的 Svelte 應用程式以進行生產，以及接下來應該訪問哪些學習資源。

先決條件

至少，建議您熟悉核心 HTML、CSS 和 JavaScript 語言，並瞭解終端/命令列。

您需要一個安裝了 node + npm 的終端來編譯和構建您的應用程式。

目標

學習如何準備我們的 Svelte 應用程式以進行生產，以及接下來應該訪問哪些學習資源。

與我們一起編寫程式碼

Git

使用以下命令克隆 GitHub 倉庫（如果您尚未克隆）：

bash

git clone https://github.com/opensas/mdn-svelte-tutorial.git

然後，要進入當前應用程式狀態，請執行

bash

cd mdn-svelte-tutorial/08-next-steps

或者直接下載資料夾的內容

bash

npx degit opensas/mdn-svelte-tutorial/08-next-steps

請記住執行 npm install && npm run dev 以在開發模式下啟動您的應用程式。

到目前為止，我們一直在使用 npm run dev 在開發模式下執行我們的應用程式。正如我們之前看到的，此指令告訴 Svelte 將我們的元件和 JavaScript 檔案編譯成 public/build/bundle.js 檔案，並將所有元件的 CSS 部分編譯成 public/build/bundle.css。它還會啟動一個開發伺服器並監視更改，在發生更改時重新編譯應用程式並重新整理頁面。

生成的 bundle.js 和 bundle.css 檔案將類似於以下內容（左側為檔案大小）

  504 Jul 13 02:43 bundle.css
95981 Jul 13 02:43 bundle.js

要將我們的應用程式編譯為生產版本，我們必須執行 npm run build。在這種情況下，Svelte 不會啟動 Web 伺服器或繼續監視更改。但是，它將使用 terser 縮小和壓縮我們的 JavaScript 檔案。

因此，在執行 npm run build 後，生成的 bundle.js 和 bundle.css 檔案將更像這樣

  504 Jul 13 02:43 bundle.css
21782 Jul 13 02:43 bundle.js

現在嘗試在應用程式的根目錄中執行 npm run build。您可能會收到警告，但現在可以忽略它。

我們的整個應用程式現在只有 21 KB——壓縮後為 8.3 KB。沒有其他執行時或依賴項需要下載、解析、執行和保持在記憶體中執行。Svelte 分析了我們的元件並將程式碼編譯為原生 JavaScript。

深入瞭解 Svelte 編譯過程

預設情況下，當您使用 npx degit sveltejs/template my-svelte-project 建立新應用程式時，Svelte 將使用 rollup 作為模組打包器。

注意：還有一個使用 webpack 的官方模板，以及許多社群維護的外掛用於其他打包器。

在 package.json 檔案中，您可以看到 build 和 dev 指令碼只是呼叫 rollup

json

"scripts": {
  "build": "rollup -c",
  "dev": "rollup -c -w",
  "start": "sirv public"
},

在 dev 指令碼中，我們傳遞了 -w 引數，它告訴 rollup 監視檔案並在更改時重新構建。

如果我們檢視 rollup.config.js 檔案，我們可以看到 Svelte 編譯器只是一個 rollup 外掛

import svelte from 'rollup-plugin-svelte';
// …
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/build/bundle.js'
  },
  plugins: [
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file - better for performance
      css: (css) => {
        css.write('public/build/bundle.css');
      }
    }),

稍後在同一檔案中，您還將看到 rollup 如何在生產模式下最小化我們的指令碼並在開發模式下啟動本地伺服器

    // In dev mode, call `npm run start` once
    // the bundle has been generated
    !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload('public'),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser()
  ],

有許多 rollup 外掛允許您自定義其行為。一個特別有用的外掛也由 Svelte 團隊維護，即 svelte-preprocess，它預處理 Svelte 檔案中的許多不同語言，例如 PostCSS、SCSS、Less、CoffeeScript、SASS 和 TypeScript。

部署您的 Svelte 應用程式

從 Web 伺服器的角度來看，Svelte 應用程式只不過是一堆 HTML、CSS 和 JavaScript 檔案。您只需要一個能夠提供靜態檔案的 Web 伺服器，這意味著您可以選擇很多選項。讓我們看幾個例子。

注意：以下部分可以應用於任何需要構建步驟的客戶端靜態網站，而不僅僅是 Svelte 應用程式。

使用 Vercel 部署

部署 Svelte 應用程式最簡單的方法之一是使用 Vercel。Vercel 是一個專門為靜態網站量身定製的雲平臺，它對大多數常見的前端工具（包括 Svelte）都提供了開箱即用的支援。

要部署我們的應用程式，請按照以下步驟操作。

註冊 Vercel 帳戶.
導航到應用程式的根目錄並執行 npx vercel；第一次執行時，系統會提示您輸入電子郵件地址，並按照發送到該地址的電子郵件中的步驟操作，以確保安全。

再次執行 npx vercel，系統會提示您回答一些問題，如下所示

bash

npx vercel

Vercel CLI 19.1.2
? Set up and deploy "./mdn-svelte-tutorial"? [Y/n] y
? Which scope do you want to deploy to? opensas
? Link to existing project? [y/N] n
? What's your project's name? mdn-svelte-tutorial
? In which directory is your code located? ./
Auto-detected Project Settings (Svelte):
- Build Command: `npm run build` or `rollup -c`
- Output Directory: public
- Development Command: sirv public --single --dev --port $PORT
? Want to override the settings? [y/N] n
   Linked to opensas/mdn-svelte-tutorial (created .vercel)
   Inspect: https://vercel.com/opensas/mdn-svelte-tutorial/[...] [1s]
✅  Production: https://mdn-svelte-tutorial.vercel.app [copied to clipboard] [19s]
   Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
   To change the domain or build command, go to https://zeit.co/opensas/mdn-svelte-tutorial/settings

接受所有預設設定，一切就緒。
部署完成後，在瀏覽器中轉到“生產”URL，您將看到已部署的應用程式！

您還可以將 Svelte Git 專案匯入 Vercel 從 GitHub、GitLab 或 BitBucket。

注意：您可以使用 npm i -g vercel 全域性安裝 Vercel，這樣您就不必使用 npx 來執行它。

自動部署到 GitLab Pages

對於託管靜態檔案，有幾種線上服務允許您在每次將更改推送到 Git 儲存庫時自動部署您的站點。它們中的大多數都涉及設定一個部署管道，該管道在每次 git push 時觸發，並負責構建和部署您的網站。

為了演示這一點，我們將把我們的待辦事項應用程式部署到 GitLab Pages。

首先，您需要在 GitLab 上註冊，然後建立一個新專案。為您的新專案提供一個簡短易記的名稱，例如“mdn-svelte-todo”。您將擁有一個指向您的新 GitLab Git 儲存庫的遠端 URL，例如 git@gitlab.com:[your-user]/[your-project].git。
在開始將內容上傳到 Git 儲存庫之前，最好新增一個 .gitignore 檔案來告訴 Git 哪些檔案要從原始碼管理中排除。在本例中，我們將透過在本地專案的根資料夾中建立一個 .gitignore 檔案並使用以下內容來告訴 Git 排除 node_modules 目錄中的檔案
bash
```
node_modules/
```
現在讓我們回到 GitLab。建立新的儲存庫後，GitLab 將向您顯示一條訊息，說明上傳現有檔案的不同選項。請按照“推送現有資料夾”標題下列出的步驟操作
bash
```
cd your_root_directory # Go into your project's root directory
git init
git remote add origin https://gitlab.com/[your-user]/mdn-svelte-todo.git
git add .
git commit -m "Initial commit"
git push -u origin main
```
注意：您可以使用 git 協議而不是 https，它更快，並且可以節省您每次訪問源儲存庫時輸入使用者名稱和密碼的麻煩。要使用它，您需要建立 SSH 金鑰對。您的源 URL 將如下所示：git@gitlab.com:[your-user]/mdn-svelte-todo.git。

透過這些說明，我們初始化一個本地 Git 儲存庫，然後將我們的遠端源（我們將程式碼推送到該位置）設定為我們 GitLab 上的儲存庫。接下來，我們將所有檔案提交到本地 Git 儲存庫，然後將其推送到 GitLab 上的遠端源。

GitLab 使用一個名為 GitLab CI/CD 的內建工具來構建您的網站並將其釋出到 GitLab Pages 伺服器。GitLab CI/CD 為完成此任務而執行的指令碼序列是從名為 .gitlab-ci.yml 的檔案建立的，您可以隨意建立和修改該檔案。配置檔案中名為 pages 的特定作業將使 GitLab 意識到您正在部署 GitLab Pages 網站。

現在讓我們嘗試一下。

在專案的根目錄中建立一個 .gitlab-ci.yml 檔案，並賦予其以下內容
yaml
```
image: node:latest
pages:
  stage: deploy
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - public
  only:
    - main
```
在這裡，我們告訴 GitLab 使用具有最新版本 node 的映象來構建我們的應用程式。接下來，我們宣告一個 pages 作業，以啟用 GitLab Pages。每當對我們的儲存庫進行推送時，GitLab 將執行 npm install 和 npm run build 來構建我們的應用程式。我們還告訴 GitLab 部署 public 資料夾的內容。在最後一行，我們配置 GitLab 僅在對我們的主分支進行推送時重新部署我們的應用程式。
由於我們的應用程式將在子目錄（如 https://your-user.gitlab.io/mdn-svelte-todo）中釋出，因此我們必須使 public/index.html 檔案中對 JavaScript 和 CSS 檔案的引用相對化。為此，我們只需從 /global.css、/build/bundle.css 和 /build/bundle.js URL 中刪除前導斜槓 (/)，如下所示
html
```
<title>Svelte To-Do list</title>

<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="global.css" />
<link rel="stylesheet" href="build/bundle.css" />

<script defer src="build/bundle.js"></script>
```
立即執行此操作。

現在我們只需要提交併將更改推送到 GitLab。透過執行以下命令執行此操作

bash

git add public/index.html
git add .gitlab-ci.yml
git commit -m "Added .gitlab-ci.yml file and fixed index.html absolute paths"
git push

每當有作業執行時，GitLab 都會顯示一個圖示，顯示作業的處理過程。單擊它將允許您檢查作業的輸出。

gitlab screenshot showing a deployed commit, which add a gitlab ci file, and changes bundle paths to relative

您還可以從 GitLab 專案的“CI / CD”>“作業”選單選項中檢查當前和先前作業的進度。

a gitlab ci job shown in the gitlab ui, running a lot of commands

GitLab 完成構建和釋出您的應用程式後，它將可以透過 https://your-user.gitlab.io/mdn-svelte-todo/ 訪問；在我的例子中，它是 https://opensas.gitlab.io/mdn-svelte-todo/。您可以在 GitLab 的 UI 中檢查頁面的 URL——請參閱“設定”>“頁面”選單選項。

透過此配置，每當您將更改推送到 GitLab 儲存庫時，應用程式都將自動重建並部署到 GitLab Pages。

瞭解更多關於 Svelte 的資訊

在本節中，我們將為您提供一些資源和專案供您檢視，以進一步學習 Svelte。

Svelte 文件

要進一步瞭解有關 Svelte 的更多資訊，您絕對應該訪問 Svelte 主頁。在那裡，您會發現許多文章解釋了 Svelte 的理念。如果您尚未完成，請務必完成 Svelte 互動式教程。我們已經涵蓋了其中大部分內容，因此完成它不會花費您太多時間——您應該將其視為練習！

您還可以查閱 Svelte API 文件和可用的示例。

要了解 Svelte 背後的動機，您應該閱讀 Rich Harris 在 YouTube 上的重新思考反應性簡報。他是 Svelte 的建立者，所以他對它有一些想法。您還可以在這裡獲得互動式幻燈片，這些幻燈片毫不意外地是用 Svelte 構建的。如果您喜歡它，您還會喜歡 “少寫程式碼，多做事”的迴歸簡報，Rich Harris 在 JSCAMP 2019 上發表了這篇演講。

其他學習資源

Rich Harris 在 Frontend Masters 上提供了一個關於 Svelte 和 Sapper 的完整課程。
儘管 Svelte 是一個相對較新的專案，但網路上仍然有很多教程和課程，因此很難推薦具體的哪個。
不過，Svelte.js — 完整指南（由Academind 提供）是一個非常受歡迎且評價很高的選擇。
Svelte 手冊（由Flavio Copes 編寫）也是學習 Svelte 主要概念的有用參考。
如果你更喜歡閱讀書籍，那麼 Mark Volkman 編寫的Svelte 和 Sapper 實戰（2020 年 10 月出版）是一個不錯的選擇，你可以線上免費預覽。
如果你想更深入地瞭解 Svelte 編譯器的內部工作原理，可以檢視Tan Li Hau 的在腦海中編譯 Svelte 部落格文章。

與社群互動

有很多不同的方式可以獲得支援並與 Svelte 社群互動

svelte.dev/chat：Svelte 的 Discord 伺服器。
@sveltejs：官方 Twitter 賬號。
@sveltesociety：Svelte 社群 Twitter 賬號。
Svelte 食譜：社群驅動的食譜、技巧和最佳實踐儲存庫，用於解決常見問題。
StackOverflow 上的 Svelte 問題：SO 上帶有 svelte 標籤的問題。
Svelte Reddit 社群：Reddit 上的 Svelte 社群討論和內容評分站點。
Svelte DEV 社群：來自 DEV.to 社群的 Svelte 相關技術文章和教程的集合。

結束

恭喜！您已完成 Svelte 教程。在之前的文章中，我們從零基礎開始學習 Svelte，並構建並部署了一個完整的應用程式。

我們瞭解了 Svelte 的理念以及它與其他前端框架的不同之處。
我們瞭解瞭如何在網站中新增動態行為，如何在元件中組織應用程式以及在元件之間共享資訊的不同方法。
我們利用了 Svelte 的響應式系統，並學習瞭如何避免常見的陷阱。
我們還了解了一些高階概念和技巧，用於與 DOM 元素互動以及使用 use 指令以程式設計方式擴充套件 HTML 元素的功能。
然後，我們瞭解瞭如何使用儲存來處理中心資料儲存庫，並建立了自己的自定義儲存來將應用程式資料持久化到 Web Storage 中。
我們還了解了 Svelte 對 TypeScript 的支援。

在這篇文章中，我們瞭解了幾個簡單易用的選項，用於將我們的應用程式部署到生產環境，並瞭解瞭如何設定一個基本的管道，以便在每次提交到 GitLab 時都部署我們的應用程式。然後，我們為您提供了一份 Svelte 資源列表，以便您能夠繼續學習 Svelte。

恭喜！完成本系列教程後，您應該具備了使用 Svelte 開發專業 Web 應用程式的堅實基礎。

部署和後續步驟

與我們一起編寫程式碼

Git

編譯我們的應用程式

深入瞭解 Svelte 編譯過程

部署您的 Svelte 應用程式

使用 Vercel 部署

自動部署到 GitLab Pages

瞭解更多關於 Svelte 的資訊

Svelte 文件

相關專案

其他學習資源

與社群互動

結束