本地开发

这是讨论如何开发新功能的好时机。默认情况下，Sapper Web 应用程序包含一个 dev NPM 脚本。要启动开发服务器，请在 services/web 目录中运行以下命令：

1npm install
2
3npm run dev

网络请求失败

由于 Firebase 保留的 URL "/__/"，使得在部署到 Firebase Hosting 时更方便地初始化我们的 Web 应用程序，你可能会注意到浏览器开发者工具的 Network 标签页中出现一些返回 "404 Not Found" 的请求。

在本地环境中，Sapper 并不知道这些保留的 URL。我们需要教会本地服务器在遇到此类 URL 时该如何处理。

修复网络请求失败问题

为了解决 "/__/" URL 的问题，我们可以利用 firebase serve CLI 命令。一如既往，我们先概述一下必要的任务：

• 启动本地 Firebase Hosting。它监听端口 5000，并在 /__/ 处提供保留的 URL。
• 使用提供的 sapper dev 命令启动 Sapper。
• 提供一个便捷的 "dev" 脚本，将上述两个任务组合在一起。
• 配置 Sapper 服务器从 http://localhost:5000/__/ 获取保留的 URL。

为实现以上目标，请按以下步骤操作：

1. 连接到下方终端并创建一个新分支：

1git switch -c set-up-local-dev 

1. 使用 nano 打开 services/web/firebase/package.json 文件，并添加以下脚本：

1"dev": "firebase serve"

1. 同样使用 nano 在 services/web/package.json 中添加以下三个 dev 脚本（替换现有的 dev 脚本）：

1"dev": "run-p dev:*",
2"dev:firebase": "npm run dev --prefix firebase",
3"dev:sapper": "sapper dev"

注意： run-p 由 npm-run-all 开发依赖提供。它会并行运行所有 dev:* 脚本。在我们的情况下，即 dev:firebase 和 dev:sapper。

1. 使用 nano 打开 services/web/src/server.js 文件，并在文件顶部添加 "import http from 'http';"。

2. 在 polka() 函数调用之前添加以下函数，以处理保留的 URL 模式：

1const devFirebaseServe = (req, res, next) => {
2  if (dev && req.url.startsWith("/__/")) {
3    http.get({
4      hostname: "localhost",
5      port: 5000,
6      path: req.url
7    }, (firebaseServeResponse) => {
8      firebaseServeResponse.pipe(res);
9    });
10  } else {
11    next();
12  }
13};

1. 在同一文件的更下方，就在 sapper.middleware() 所在行的上方，添加 devFirebaseServe,。

最终的 server.js 版本如下所示。

1import http from 'http';
2import sirv from 'sirv';
3import polka from 'polka';
4import compression from 'compression';
5import * as sapper from '@sapper/server';
6
7const { PORT, NODE_ENV } = process.env;
8const dev = NODE_ENV === 'development';
9
10const devFirebaseServe = (req, res, next) => {
11	if (dev && req.url.startsWith("/__/")) {
12	  http.get({
13		hostname: "localhost",
14		port: 5000,
15		path: req.url
16	  }, (firebaseServeResponse) => {
17		firebaseServeResponse.pipe(res);
18	  });
19	} else {
20	  next();
21	}
22};
23
24polka() // You can also use Express
25	.use(
26		compression({ threshold: 0 }),
27		sirv('static', { dev }),
28		devFirebaseServe,
29		sapper.middleware()
30	)
31	.listen(PORT, err => {
32		if (err) console.log('error', err);
33	});

点击 Run，然后，登录 Firebase，并在 services/web 目录中运行以下命令。它将在本地提供 Firebase 文件并以开发模式启动 Sapper：

1npm install
2
3npm run dev

点击 Run 将代码推送到 GitHub。

前往你的 GitHub 仓库，为 set-up-local-dev 分支创建并合并拉取请求。如果需要帮助，请参考 创建拉取请求课程。

总结

任何本地开发所需的内容都很好地隐藏在 services/web 目录中的 npm run dev 命令背后。该命令提供 Firebase 主机内容，并以开发模式启动 Sapper，包括在你修改代码时进行热重载。

即将到来的课程提示

从现在开始，你在启动开发服务器前需要先登录 Firebase。

注意：在课程末尾，我们将使用 Firebase 提供的一款全新产品，使本地开发变得简单得多！

如果你查看 GitHub 仓库页面上的 "Actions" 标签页，可能会注意到在本章的拉取请求合并后触发了部署。这是因为我们在 services/web 目录内进行了文件更改。