Vite 安装

Vite 安装

要将基于文件的路由与 Esbuild 结合使用，您需要安装 @tanstack/router-plugin 包。

npm install -D @tanstack/router-plugin

npm install -D @tanstack/router-plugin

安装完成后，您需要将插件添加到您的配置中。

tsx

// esbuild.config.js
import { TanStackRouterEsbuild } from '@tanstack/router-plugin/esbuild'

export default {
  // ...
  plugins: [
    TanStackRouterEsbuild({ target: 'react', autoCodeSplitting: true }),
  ],
}

// esbuild.config.js
import { TanStackRouterEsbuild } from '@tanstack/router-plugin/esbuild'

export default {
  // ...
  plugins: [
    TanStackRouterEsbuild({ target: 'react', autoCodeSplitting: true }),
  ],
}

或者，您可以克隆我们的 Quickstart Esbuild 示例并开始使用。

现在您已将插件添加到您的 Esbuild 配置中，您已准备好开始使用 TanStack Router 的基于文件的路由。

忽略生成的路由树文件

如果您的项目配置为使用 linter 和/或格式化程序，您可能想要忽略生成的路由树文件。此文件由 TanStack Router 管理，因此不应被您的 linter 或格式化程序更改。

以下是一些资源可以帮助您忽略生成的路由树文件

警告

如果您正在使用 VSCode，您可能会在重命名路由后意外地打开路由树文件（并显示错误）。

您可以通过在 VSCode 设置中将文件标记为只读来防止这种情况。我们的建议是也将其从搜索结果和文件监视器中排除，使用以下设置

json

{
  "files.readonlyInclude": {
    "**/routeTree.gen.ts": true
  },
  "files.watcherExclude": {
    "**/routeTree.gen.ts": true
  },
  "search.exclude": {
    "**/routeTree.gen.ts": true
  }
}

{
  "files.readonlyInclude": {
    "**/routeTree.gen.ts": true
  },
  "files.watcherExclude": {
    "**/routeTree.gen.ts": true
  },
  "search.exclude": {
    "**/routeTree.gen.ts": true
  }
}

您可以在用户级别使用这些设置，或者仅为单个工作区使用，方法是在项目的根目录创建文件 .vscode/settings.json。

配置

当将 TanStack Router 插件与 Esbuild 结合使用进行基于文件的路由时，它带有一些合理的默认值，这些默认值应该适用于大多数项目

json

{
  "routesDirectory": "./src/routes",
  "generatedRouteTree": "./src/routeTree.gen.ts",
  "routeFileIgnorePrefix": "-",
  "quoteStyle": "single"
}

{
  "routesDirectory": "./src/routes",
  "generatedRouteTree": "./src/routeTree.gen.ts",
  "routeFileIgnorePrefix": "-",
  "quoteStyle": "single"
}

如果这些默认值适用于您的项目，您根本不需要配置任何内容！但是，如果您需要自定义配置，您可以通过编辑传递到 TanStackRouterEsbuild 函数的配置对象来完成。

您可以在基于文件的路由 API 参考中找到所有可用的配置选项。

忽略生成的路由树文件

配置

订阅 Bytes

订阅 Bytes