SvelteKit翻译教程——创建一个项目

_大猛_
588 阅读3分钟

一个典型的 SvelteKit 项目如下所示：

my-project/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [your server-only lib files]
│ │ └ [your lib files]
│ ├ params/
│ │ └ [your param matchers]
│ ├ routes/
│ │ └ [your routes]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ └ hooks.server.js
├ static/
│ └ [your static assets]
├ tests/
│ └ [your tests]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

您还可以找到常见文件，例如.gitignore和.npmrc（.prettierrc以及.eslintrc.cjs等等，如果您在运行时选择了这些选项npm create svelte@latest）。

项目文件

源代码

该src目录包含您项目的核心内容。src/routes除了和之外的所有内容src/app.html都是可选的。

  • lib包含您的库代码（实用程序和组件），可以通过别名导入$lib，或使用以下命令打包以进行分发svelte-package

    • server包含您的仅服务器库代码。可以使用$lib/server别名导入。SvelteKit 将阻止您在客户端代码中导入这些内容。

  • params包含您的应用程序需要的任何参数匹配器

  • routes包含您的应用程序的路由。您还可以在此处并置仅在单个路由中使用的其他组件

  • app.html是您的页面模板 — 包含以下占位符的 HTML 文档：

    • %sveltekit.head%-<link>以及<script>应用程序所需的元素，以及任何<svelte:head>内容
    • %sveltekit.body%— 渲染页面的标记。它应该位于 a<div>或其他元素内部，而不是直接位于 内部<body>，以防止浏览器扩展注入元素引起的错误，然后这些元素会被水合过程破坏。如果情况并非如此，SvelteKit 会在开发过程中向您发出警告
    • %sveltekit.assets%—paths.assets如果指定的话，或者是相对路径paths.base
    • %sveltekit.nonce%—用于手动包含的链接和脚本的CSP随机数（如果使用）
    • %sveltekit.env.[NAME]%- 这将在渲染时替换为环境变量，该变量必须以（通常）[NAME]开头。如果不匹配，它将回退到。publicPrefixPUBLIC_``''

  • error.html是当其他一切都失败时呈现的页面。它可以包含以下占位符：

    • %sveltekit.status%— HTTP 状态
    • %sveltekit.error.message%— 错误消息

  • hooks.client.js包含您的客户端钩子

  • hooks.server.js包含您的服务器钩子

  • service-worker.js包含您的Service Worker

（项目是否包含.js或.ts文件取决于您在创建项目时是否选择使用 TypeScript。您可以使用本页底部的切换按钮在文档中的 JavaScript 和 TypeScript 之间切换。）

如果您在设置项目时添加了Vitestsrc ，则您的单元测试将位于带有扩展名的目录中。.test.js

静态文件

任何应按原样提供的静态资源（例如robots.txt或favicon.png）都应放入此处。

测试

如果您在设置项目时添加了用于浏览器测试的Playwright ，则测试将位于此目录中。

package.json

您的package.json文件必须包含@sveltejs/kit,svelte和viteas devDependencies。

当您使用 创建项目时npm create svelte@latest，您还会注意到其中package.json包含"type": "module"。这意味着 .js 文件被解释为带有import和export关键字的本机 JavaScript 模块。旧版 CommonJS 文件需要 .cjs 文件扩展名。

svelte.config.js

该文件包含您的 Svelte 和 SvelteKit配置。

tsconfig.json

如果您在 npm create svelte@latest 期间添加了类型检查，则此文件（或 jsconfig.json，如果您更喜欢类型检查的 .js 文件而不是 .ts 文件）配置 TypeScript。由于 SvelteKit 依赖于以特定方式设置的某些配置，因此它会生成自己的 .svelte-kit/tsconfig.json 文件，您自己的配置会扩展该文件。

vite.config.js 

SvelteKit 项目实际上只是一个使用该插件以及任何其他Vite 配置的Vite项目。@sveltejs/kit/vite

其他文件

.svelte-kit

当您开发和构建项目时，SvelteKit 将在.svelte-kit目录中生成文件（可配置为outDir）。您可以忽略其内容，并随时删除它们（当您下一步dev或时，它们将重新生成build）。

avatar
文章
阅读
粉丝