这一章是为了满足好奇心的参考。我们推荐你先拿着项目模板把玩一圈，在你大致了解所有东西都是怎么一回事后再回来看看这里。

如果你看过 sapper-template 仓库，你会发现 Sapper 项目大致是这样：

  1. ├ package.json
  2. ├ src
  3. │ ├ routes
  4. │ │ ├ # your routes here
  5. │ │ ├ _error.svelte
  6. │ │ └ index.svelte
  7. │ ├ client.js
  8. │ ├ server.js
  9. │ ├ service-worker.js
  10. │ └ template.html
  11. ├ static
  12. │ ├ # your files here
  13. └ rollup.config.js / webpack.config.js

首次运行 Sapper 时，它会创建一个 __sapper__ 目录，其中包含生成的相关文件。

你会注意到一些其他的文件和 cypress 目录，这些都与 测试 相关，我们现在不必去关心这些。

你可以自行创建这些文件目录，但最好是使用模板。查阅 开始使用 了解如何使用模板。

package.json

在 package.json 中包含了你的应用程序的依赖和定义过的若干脚本：

  • npm run dev —— 以开发模式运行你的应用，并监测源文件的修改。
  • npm run build —— 以生产模式构建应用程序。
  • npm run export —— 在可行的情况下，导出一个静态版本应用程序。参考 导出 部分。
  • npm start —— 在完成应用程序构建后，在生产模式启动应用。
  • npm test —— 运行测试。参考 测试 部分。

SRC

这个目录中包含着应用程序的三种 入口端点 —— src/client.js ，src/server.js ，和可选的src/service-worker.js ，以及一个 src/template.html 文件。

src/client.js

此文件必须引入并调用生成的 @sapper/app 模块中的 start 函数：

  1. import * as sapper from '@sapper/app';
  3. sapper.start({
  4.     target: document.querySelector('#sapper')
  5. });

多数情况下，这会是入口模块的全部东西了，当然了，你还可以按照自己的需要任意进行修改。阅读 客户端API 相关内容，了解关于可引入函数的更多信息。

src/server.js

这是一个常规的 Express 应用（或者 Polka, 等等都行）。它有三项要求：

  • 它应该使用类似 sirv 的工具，为 static 目录的内容提供服务。
  • 在从 @sapper/server 中引入 sapper 的地方，它应该在末尾调用 app.use(sapper.middleware()) 。
  • 它必须监听 process.env.PORT 。

除了以上几点，你可以按照需要任意编写服务器。

src/service-worker.js

Service workers 作为代理服务器，在如何响应网络请求这方面，为你带来细粒度的可控性。例如，在浏览器请求 /goats.jpg 时，service worker 可以使用一个预先缓存的文件作为响应，或者，它也可以将请求传递到服务器，甚至可以返回一个完全不同的响应，比如给你返回一个骆驼照片。

配合其他方面的特性，service worker 使得构建可离线运行的应用成为了可能。

由于每个应用程序需要各自不同的 service worker （有时需要能利用缓存提供服务，有时仅仅作为没有联网时的备用手段），Sapper 并无控制 service worker 的企图。相反，你需要在 service-worker.js 中编写逻辑。你可以从 @sapper/service-worker 中引入以下东西：

  • files — 由 static 目录中的文件组成的数组。
  • shell — 由打包工具（rollup 或 webpack）生成的 客户端 JavaScript 代码。
  • routes — { pattern: RegExp } 对象的数组，可以使用它来确认 Sapper 控制的页面正在被请求。
  • timestamp — service worker 生成的时间戳（可以用于生成唯一的缓存名称）。

src/template.html

此文件是为服务端响应准备的模板。Sapper 将注入内容以替换以下标签：

  • %sapper.base% — 一个 <base> 元素（查阅 base URLs）
  • %sapper.styles% — 仅作用域被请求页面的 CSS
  • %sapper.head% — 代表页面上 <head> 内容的 HTML 代码，比如 <title>
  • %sapper.html% — 代表被渲染页面 body 部分的 HTML 代码
  • %sapper.scripts% — 客户端应用的 script 标签

src/routes

页面和服务器的路由。查看 路由 部分了解详细信息。

static

此处用于放置应用程序需要使用的任意文件 —— 字体、图片等等。例如static/favicon.png 会以 /favicon.png的形式在服务中使用。

Sapper 不会为这些文件提供服务，你需要使用 sirv 或者 serve-static ，但 Sapper 会读取 static 目录中的内容，你便可以轻松地生成一个缓存 manifest 来提供离线支持了（参考 service-worker.js）。

rollup.config.js / webpack.config.js

Sapper 可以使用 Rollup 或 webpack 来打包应用程序。你基本不需要修改配置，如果你想修改也可以（比如你想要添加一个新的 loader 或者插件）。