SvelteKit

SvelteKit 是一个使用 Svelte 快速开发健壮、高性能 Web 应用的框架。

¥SvelteKit is a framework for rapidly developing robust, performant web applications using Svelte.

快速入门

¥Quickstart

要在 Turborepo 中快速开始使用 SvelteKit，请使用 with-svelte 示例：

¥To get started with SvelteKit in a Turborepo quickly, use the with-svelte example:

pnpm dlx create-turbo@latest -e with-svelte

将 SvelteKit 应用添加到现有仓库

¥Adding a SvelteKit application to an existing repository

使用 npm create svelte 在包中设置新的 SvelteKit 应用。从你的代码库根目录运行：

¥Use npm create svelte to set up a new SvelteKit application in a package. From the root of your repository, run:

pnpm dlx sv create

与你的仓库集成

¥Integrating with your repository

要将 内部软件包 添加到你的新应用，请使用你的包管理器将其安装到应用中：

¥To add Internal Packages to your new application, install them into the app with your package manager:

{
  "name": "my-app",
  "dependencies": {
+   "@repo/ui": "workspace:*"
  }
}

确保运行包管理器的安装命令。你可能还需要在 package.json 中更新 scripts，以适应你的代码库中的用例。

¥Make sure to run your package manager's install command. You also may need to update scripts in package.json to fit your use case in your repository.

自定义任务

¥Customizing tasks

默认情况下，新应用将使用根 turbo.json 中定义的任务。如果你想为新应用配置不同的任务，请使用 软件包配置。

¥By default, the new application will use the tasks defined in the root turbo.json. If you'd like to configure tasks differently for the new application, use Package Configurations.

微前端

¥Microfrontends

使用 Svelte 和 Turborepo 的微前端 时，请确保为子应用设置 base 属性。这确保图片和 CSS 等资源将被路由到正确的应用。

¥When using Svelte with Turborepo's microfrontends, make sure to set the base property for child applications. This ensures the assets like images and CSS will be routed to the correct application.

import { defineConfig } from 'vite';
 
export default defineConfig({
  base: '/admin',
});