## 
其他资源

请参阅[的 Svelte FAQ](../svelte/faq)和[`的 vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md)，以获取从这些库中产生的问题的答案。

## 
我能用 SvelteKit 做什么？

查看有关项目类型的文档以获取更多详细信息。[文档](project-types)

## 
如何在我的应用程序中包含 package.json 的详细信息？

如果您想在您的应用程序中包含应用程序的版本号或其他来自 `package.json` 的信息，您可以如此加载 JSON：

```ts
// @errors: 2732
/// file: svelte.config.js
import pkg from './package.json' with { type: 'json' };
```

## 
如何修复尝试包含包时遇到的错误？

大多数与包含库相关的问题都是由于打包不正确造成的。您可以通过将其输入到[publint 网站](https://publint.dev/)来检查库的打包是否与 Node.js 兼容。

以下是一些在检查库是否正确打包时需要注意的事项：

*   `exports` 具有比其他入口字段（如 `main` 和 `module`）更高的优先级。添加一个 `exports` 字段可能不向后兼容，因为它会阻止深度导入。
*   ESM 文件应以`.mjs`结尾，除非设置了`"type": "module"`，在这种情况下，任何 CommonJS 文件都应以`.cjs`结尾。
*   `main` 应当在 `exports` 未定义时进行定义。它应为一个 CommonJS 或 ESM 文件，并遵守前面的项目符号。如果定义了 `module` 字段，则应指向一个 ESM 文件。
*   Svelte 组件应作为未编译的 `.svelte` 文件分发，包内任何 JS 代码应仅以 ESM 格式编写。自定义脚本和样式语言，如 TypeScript 和 SCSS，应分别预处理为纯 JS 和 CSS。我们建议使用 [`svelte-package`](./packaging) 对 Svelte 库进行打包，这将为您完成此操作。

库在浏览器中使用 Vite 效果最佳，尤其是在它们分发 ESM 版本时，尤其是当它们是 Svelte 组件库的依赖项时。您可能希望建议库作者提供 ESM 版本。然而，由于默认情况下，[`vite-plugin-svelte` 将会请求 Vite 预打包它们](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies)，使用 `esbuild` 将它们转换为 ESM，因此 CommonJS (CJS) 依赖项也应该可以正常工作。

如果您仍然遇到问题，我们建议您同时搜索[Vite 问题跟踪器](https://github.com/vitejs/vite/issues)和所涉及库的问题跟踪器。有时，通过调整[`optimizeDeps`](https://vitejs.dev/config/#dep-optimization-options)或[`ssr`](https://vitejs.dev/config/#ssr-options)配置值可以解决这些问题，尽管我们建议这仅作为修复所涉及库的短期解决方案。

## 
如何使用视图转换 API？

虽然 SvelteKit 没有与 [视图过渡](https://developer.chrome.com/docs/web-platform/view-transitions/) 的特定集成，你可以在 [`onNavigate`]($app-navigation#onNavigate) 中调用 `document.startViewTransition` 来在每次客户端导航时触发视图过渡。

```js
// @errors: 2339 2810
import { onNavigate } from '$app/navigation';

onNavigate((navigation) => {
	if (!document.startViewTransition) return;

	return new Promise((resolve) => {
		document.startViewTransition(async () => {
			resolve();
			await navigation.complete;
		});
	});
});
```

更多内容，请参阅 Svelte 博客上的["解锁视图转换"](/blog/view-transitions)。

## 
如何设置数据库？

将查询数据库的代码放入[服务器路由](./routing#server)中 - 不要在.svelte 文件中查询数据库。您可以创建一个`db.js`或类似的文件，立即建立连接并使客户端在整个应用程序中作为单例可用。您可以在`hooks.server.js`中执行任何一次性设置代码，并将您的数据库助手导入到需要它们的任何端点。

您可以使用 [Svelte CLI](/docs/cli/overview)自动设置数据库集成。

## 
如何使用客户端库访问`document`或`window>？`

如果您需要访问 `文档` 或 `窗口` 变量，或者需要仅在客户端运行的代码，您可以将它包裹在 `浏览器` 检查中：

```js
/// <reference types="@sveltejs/kit" />
// ---cut---
import { browser } from '$app/environment';

if (browser) {
	// client-only code here
}
```

您也可以在`onMount`中运行代码，如果您想在组件首次渲染到 DOM 后运行它：

```js
// @filename: ambient.d.ts
// @lib: ES2015
declare module 'some-browser-only-library';

// @filename: index.js
// ---cut---
import { onMount } from 'svelte';

onMount(async () => {
	const { method } = await import('some-browser-only-library');
	method('hello world');
});
```

如果希望使用的库是无副作用的，您还可以静态导入它，在服务器端构建过程中它将被摇树优化，其中 `onMount` 将自动替换为空操作：

```js
// @filename: ambient.d.ts
// @lib: ES2015
declare module 'some-browser-only-library';

// @filename: index.js
// ---cut---
import { onMount } from 'svelte';
import { method } from 'some-browser-only-library';

onMount(() => {
	method('hello world');
});
```

最后，您还可以考虑使用一个 `{#await}` 块：

```svelte
<!--- file: index.svelte --->
<script>
	import { browser } from '$app/environment';

	const ComponentConstructor = browser ?
		import('some-browser-only-library').then((module) => module.Component) :
		new Promise(() => {});
</script>

{#await ComponentConstructor}
	<p>Loading...</p>
{:then component}
	<svelte:component this={component} />
{:catch error}
	<p>Something went wrong: {error.message}</p>
{/await}
```

## 
如何使用不同的后端 API 服务器？

您可以使用[`event.fetch`](./load#Making-fetch-requests)从外部 API 服务器请求数据，但请注意，您需要处理[CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)，这可能会导致一些复杂情况，例如通常需要预先发送请求，从而导致更高的延迟。向不同的子域发送请求也可能由于额外的 DNS 查找、TLS 设置等而增加延迟。如果您想使用这种方法，可能会发现[`handleFetch`](./hooks#Server-hooks-handleFetch)很有帮助。

另一种方法是设置代理以绕过 CORS 问题。在生产环境中，您会将路径如`/api`重写到 API 服务器；对于本地开发，使用 Vite 的[`server.proxy`](https://vitejs.dev/config/server-options.html#server-proxy)选项。

如何在生产环境中设置重写取决于您的部署平台。如果重写不是选项，您可以另加一个[API 路由](./routing#server)：

```js
/// file: src/routes/api/[...path]/+server.js
/** @type {import('./$types').RequestHandler} */
export function GET({ params, url }) {
	return fetch(`https://my-api-server.com/${params.path + url.search}`);
}
```

（请注意，您可能还需要代理 `POST`/`PATCH` 等请求，并根据需要转发 `request.headers`。）

## 
如何使用中间件？

`适配器节点`构建一个中间件，您可以使用它与自己的服务器一起用于生产模式。在开发中，您可以通过使用 Vite 插件将中间件添加到 Vite。例如：

```js
// @errors: 2322
// @filename: ambient.d.ts
declare module '@sveltejs/kit/vite'; // TODO this feels unnecessary, why can't it 'see' the declarations?

// @filename: index.js
// ---cut---
import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').Plugin} */
const myPlugin = {
	name: 'log-request-middleware',
	configureServer(server) {
		server.middlewares.use((req, res, next) => {
			console.log(`Got request ${req.url}`);
			next();
		});
	}
};

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [myPlugin, sveltekit()]
};

export default config;
```

查看[Vite 的`configureServer`文档](https://vitejs.dev/guide/api-plugin.html#configureserver)以获取更多详细信息，包括如何控制排序。

## 
如何使用 Yarn？

### 
支持 Yarn 2 吗？

有点问题。即插即用功能，即“pnp”，已损坏（它与 Node 模块解析算法不符，并且[不支持与原生 JavaScript 模块一起使用](https://github.com/yarnpkg/berry/issues/638)，而 SvelteKit——以及越来越多的[包](https://blog.sindresorhus.com/get-ready-for-esm-aa53530b3f77)——正是这样使用的）。您可以在您的[`.yarnrc.yml`](https://yarnpkg.com/configuration/yarnrc#nodeLinker)文件中使用`nodeLinker: 'node-modules'`来禁用 pnp，但可能直接使用 npm 或[pnpm](https://pnpm.io/)更简单，它们同样快速高效，但无需处理兼容性问题。

### 
如何使用 Yarn 3？

当前最新版本的 Yarn（版本 3）中的 ESM 支持[被视为实验性的](https://github.com/yarnpkg/berry/pull/2161)。

以下似乎可以工作，尽管您的结果可能会有所不同。首先创建一个新的应用程序：

```bash
yarn create svelte myapp
cd myapp
```

并启用 Yarn Berry：

```bash
yarn set version berry
yarn install
```

Yarn Berry 的一个更有趣的特性是能够拥有单个全局缓存包，而不是在磁盘上为每个项目存储多个副本。然而，将`enableGlobalCache`设置为 true 会导致构建失败，因此建议将以下内容添加到`.yarnrc.yml`文件中：

`nodeLinker: 节点链接`

这会导致包被下载到本地的 node\_modules 目录中，但避免了上述问题，并且是目前使用 Yarn 3 版本的最佳选择。