路径别名

路径别名是 TypeScript 的一个有用功能，它允许您为项目中目录结构中可能较远的路径定义一个快捷方式。这可以帮助您避免代码中冗长的相对导入，并使其更容易重构项目结构。这对于避免代码中冗长的相对导入特别有用。

默认情况下，TanStack Start 不包含路径别名。但是，您可以通过更新项目根目录中的 tsconfig.json 文件并添加以下配置来轻松地将它们添加到您的项目中

json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

在此示例中，我们定义了路径别名 ~/*，它映射到 ./src/* 目录。这意味着您现在可以使用 ~ 前缀从 src 目录导入文件。

更新 tsconfig.json 文件后，您需要安装 vite-tsconfig-paths 插件，以在您的 TanStack Start 项目中启用路径别名。您可以通过运行以下命令来执行此操作

npm install -D vite-tsconfig-paths

npm install -D vite-tsconfig-paths

现在，您需要更新 app.config.ts 文件以包含以下内容

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'
import viteTsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: [
      // this is the plugin that enables path aliases
      viteTsConfigPaths({
        projects: ['./tsconfig.json'],
      }),
    ],
  },
})

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'
import viteTsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: [
      // this is the plugin that enables path aliases
      viteTsConfigPaths({
        projects: ['./tsconfig.json'],
      }),
    ],
  },
})

一旦此配置完成，您现在就可以像这样使用路径别名导入文件了

// app/routes/posts/$postId/edit.tsx
import { Input } from '~/components/ui/input'

// instead of

import { Input } from '../../../components/ui/input'

// app/routes/posts/$postId/edit.tsx
import { Input } from '~/components/ui/input'

// instead of

import { Input } from '../../../components/ui/input'

订阅 Bytes

订阅 Bytes