部署以及下一步

在上一篇文章中,我们了解了 Svelte 对 TypeScript 的支持,以及如何使用它使应用程序更加健壮。在本文中,我们将学习如何部署应用程序并将其发布到在线环境,并分享一些你应该继续使用的资源,以继续你的 Svelte 学习之旅。

前提:

建议你熟悉核心的 HTMLCSSJavaScript 语法,并了解终端/命令行的知识。

你需要安装了 Node.js 和 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.jsbundle.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.jsbundle.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 文件中,你可以看到 builddev 脚本只是调用了 rollup:

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

dev 脚本中,我们传递了 -w 参数,该参数告诉 rollup 监视文件变化并在文件更改时重新构建。

查看 rollup.config.js 文件,我们可以看到 Svelte 编译器只是 rollup 的一个插件:

js
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({
      // 在非生产环境中启用运行时检查
      dev: !production,
      // 将所有组件的 CSS 提取到一个单独的文件中
      // 这样可以提高性能
      css: (css) => {
        css.write('public/build/bundle.css');
      }
    }),

在同一个文件中,你还会看到 rollup 如何在生产模式下最小化我们的脚本,以及在开发模式下启动本地服务器:

js
    // 在开发模式下,在生成 bundle 后调用 `npm run start`
    !production && serve(),

    // 监视 `public` 目录,并在非生产环境下刷新浏览器
    !production && livereload('public'),

    // 如果我们正在构建生产环境(npm run build
    // 而不是 npm run dev),则进行代码压缩
    production && terser()
  ],

许多适用于 rollup 的插件,可以让你自定义其行为。有一个特别有用的插件(也是由 Svelte 团队维护),叫做 svelte-preprocess,它可以预处理 Svelte 文件中的许多种不同的语言,如 PostCSS、SCSS、Less、CoffeeScript、SASS 和 TypeScript。

部署你的 Svelte 应用程序

从 Web 服务器的角度来看,Svelte 应用程序只是一堆 HTML、CSS 和 JavaScript 文件。你只需要一个能够提供静态文件的 Web 服务器,就可以运行 Svelte 应用程序,这意味着你有很多选择。让我们来看几个例子。

备注: 下面的内容不仅适用于 Svelte 应用程序,还适用于任何需要构建步骤的客户端静态网站。

使用 Vercel 进行部署

部署 Svelte 应用程序的方式中,其中最简单的一种是使用 Vercel。Vercel 是一个专门为静态站点定制的云平台,它对大多数常见的前端工具都有开箱即用的支持,其中包括 Svelte。

要部署应用程序,请按照以下步骤进行操作。

  1. 在 Vercel 上注册一个账户
  2. 进入你的应用程序的根目录,并运行 npx vercel;第一次运行时,系统会提示你输入电子邮件地址,并按照发送到该地址的电子邮件中的步骤进行操作,以确保安全性。
  3. 再次运行 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
    
  4. 接受所有默认设置,这没有任何问题。
  5. 当部署完成后,在浏览器中打开“生产环境”URL,你会看到已经部署的应用!

你还可以从 GitHubGitLabBitBucket 导入 Svelte git 项目到 Vercel 中。

备注: 你可以通过 npm i -g vercel 全局安装 Vercel,这样你就不必使用 npx 来运行它了。

自动部署到 GitLab Pages

对于托管静态文件,有多种在线服务允许你在每次推送代码到 git 仓库时,自动部署你的网站。大多数服务都涉及设置一个部署流水线,该流水线在每次 git push 时触发,负责构建和部署你的网站。

我们将把我们的待办事项应用部署到 GitLab Pages,借此来演示这一点。

  1. 首先,你需要在 GitLab 注册,然后创建一个新项目。给你的新项目取一个简短、简单的名称,比如“mdn-svelte-todo”。你将获得指向你的新 GitLab 存储库的远程 URL,例如 git@gitlab.com:[你的用户名]/[你的项目名].git
  2. 在开始上传内容到你的 git 存储库之前,最好添加一个 .gitignore 文件来告诉 git 哪些文件应该排除在源代码控制之外。在我们的例子中,我们将在你本地项目的根文件夹中创建 .gitignore 文件,来排除“node_modules”目录中的内容,文件内容如下:
    bash
    node_modules/
    
  3. 现在让我们回到 GitLab。在创建新仓库后,GitLab 将向你打招呼,并解释了上传现有文件的不同选项。按照 Push an existing folder(推送现有文件夹)标题下的步骤进行操作:
    bash
    cd your_root_directory # 进入项目的根文件夹
    git init
    git remote add origin https://gitlab.com/[你的用户名]/mdn-svelte-todo.git
    git add .
    git commit -m "Initial commit"
    git push -u origin main
    

    备注: 你可以使用 git 协议替代 https,它更快速,而且无需每次访问远程仓库时输入用户名和密码。要使用 git 协议,你需要创建一个 SSH 密钥对。你的远程仓库 URL 将是这样的:git@gitlab.com:[你的用户名]/mdn-svelte-todo.git

按照以上步骤初始化本地 git 仓库,然后将远程仓库设置为 GitLab 上的仓库,接下来将所有文件提交到本地 git 仓库,然后将它们推送到 GitLab 上的远程仓库。

GitLab 使用名为 GitLab CI/CD 的内置工具来构建你的网站并将其发布到 GitLab Pages 服务器。GitLab CI/CD 运行的脚本序列用于完成这个任务,这些脚本是在名为 .gitlab-ci.yml 的文件中创建和修改的。配置文件中的一个特定作业叫做 pages,它让 GitLab 知道你正在部署一个 GitLab Pages 网站。

现在我们来尝试一下。

  1. 在项目的根目录下创建 .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 installnpm run build 来构建我们的应用程序。我们还告诉 GitLab 部署 public 文件夹的内容。在最后一行,我们配置 GitLab 仅在对主分支进行推送时重新部署我们的应用程序。
  2. 由于我们的应用程序将在子目录发布(例如 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>
    
    现在进行这个操作。
  3. 现在,我们只需要提交并推送我们的更改到 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 截图显示部署的提交,该提交添加了 gitlab ci 文件,并更改了 bundle 路径为相对路径

你还可以从 GitLab 项目的 CI / CD > Jobs 菜单选项中,检查当前和之前作业的进度。

在 gitlab 界面中显示的 gitlab ci 作业,运行了许多命令

一旦 GitLab 完成构建和发布你的应用程序,该应用程序将可以通过 https://your-user.gitlab.io/mdn-svelte-todo/ 访问;在我的例子中是 https://opensas.gitlab.io/mdn-svelte-todo/。你可以在 GitLab 的用户界面中检查页面的 URL,具体操作请参阅 Settings > Pages 菜单选项。

通过这个配置,每当你推送更改到 GitLab 仓库,应用程序将自动重建并部署到 GitLab Pages。

进一步了解 Svelte

在这个部分,我们将为你提供一些资源和项目,以进一步学习 Svelte。

Svelte 文档

要深入了解 Svelte 并学习更多关于它的知识,你一定要访问 Svelte 主页。在那里,有许多文章解释 Svelte 的理念。如果你还没有这样做,一定要完成 Svelte 交互式教程。我们已经涵盖了大部分内容,所以你不需要花费太多时间来完成它,你可以将其视为实践!

你还可以查阅 Svelte API 文档和可用的示例代码

要了解 Svelte 作者创建它背后的动机,你应该观看 Rich Harris 在 YouTube 上的 Rethinking reactivity(重新思考响应式)演讲。他是 Svelte 的创作者,所以他对此有很多见解。你还可以在这里找到交互式幻灯片,当然,这些幻灯片是使用 Svelte 构建的。如果你喜欢这个演讲,你还可以观看 Rich Harris 在 JSCAMP 2019 上的演讲 The Return of 'Write Less, Do More'(“写的少,做的多”的回归)

相关项目

还有其他与 Svelte 相关的项目值得一看:

  • Sapper:由 Svelte 驱动的应用程序框架,提供服务器端渲染(SSR)、代码拆分、基于文件的路由、离线支持等功能。可以将其视为 Svelte 的 Next.js。如果你计划开发相当复杂的 Web 应用程序,一定要查看这个项目。
  • Svelte Native:由 Svelte 驱动的移动应用程序框架。可以将其视为 Svelte 的 React Native
  • Svelte for VS Code:官方支持的用于处理 .svelte 文件的 VS Code 插件,我们在我们的 TypeScript 文章中介绍过它。

其他学习资源

与社区互动

与 Svelte 社区互动并获取支持的方式有很多:

完成

恭喜!你已经完成了 Svelte 教程。在前面的文章中,我们从对 Svelte 一无所知到构建和部署了完整应用程序。

  • 我们了解了 Svelte 的理念,以及它与其他前端框架的区别。
  • 我们看到了如何为我们的网站添加动态行为,如何用组件组织我们的应用程序,并以不同的方式在它们之间共享信息。
  • 我们利用了 Svelte 的响应式系统,并学习了如何避免常见的陷阱。
  • 我们还了解了一些高级概念和技术,以与 DOM 元素进行交互,并使用 use 指令以编程方式扩展 HTML 元素的功能。
  • 然后,我们学习了如何使用 store 来处理中央数据存储库,并创建了自己的自定义 store 来将应用程序数据持久化到 Web 存储中。
  • 我们还简要介绍了 Svelte 的 TypeScript 支持。

在本文中,我们学习了一些零麻烦的选项,将我们的应用程序部署到生产环境,并了解了如何设置基本的流水线,在每次提交时将我们的应用程序部署到 GitLab。然后,我们为你提供了一些 Svelte 资源的列表,以便进一步学习 Svelte。

恭喜!完成本系列教程后,你应该具备一个坚实的基础,能够开始使用 Svelte 开发专业的 Web 应用程序。