如何设置路径别名 Vite + React

为什么路径别名？

Vite 中的路径别名允许我们在导入模块时使用项目目录的自定义路径。
假设我们正在开发一个 React 项目，在我们的卡片组件中，我们想要导入三个不同的组件来构建我们的卡片。比如说按钮、标题、图像。

我们可以这样写

import Button from '../../components/Button'
import Header from '../../components/ui/Header'
import Image from '../../components/Image'

⁠
目前看起来不错，但想想当我们想要重构或改进我们的组件并且必须导入大约 5 或 6 个以上组件时。然后就开始变得混乱。

import Button from '../../components/Button'
import Header from '../../components/ui/Header'
import Image from '../../components/Image'
import Panel from "../../components/Dashboard/Panel";
import Input from "../../components/Forms/Input";
import Submit from "../../components/Forms/Submit"

这就是路径导入变得有用的地方，它们使我们的导入语句更清晰、更易于管理。使用路径别名，我们上面的内容就变成了

import Button from '@/src/components/Button'
import Header from '@/src/components/ui/Header'
import Image from '@/src/components/Image'

对于那些不使用自动导入的人，您不需要记住目录与您正在处理的组件有多远。当您需要移动文件或重构项目结构时，它只是简化了代码组织，您无需更新代码库中的大量相对导入路径

向您的项目添加路径别名

首先需要安装React + Vite
⁠pnpm create vite setup-path-alias --template react
接下来，您将进入刚刚创建的项目目录然后运行

cd setup-path-alias                                                                                                                                         pnpm install 
pnpm run dev    

注意：我使用快捷方式使用模板创建Vite应用程序，您可以使用任何您喜欢的其他方法。所以只要你创建应用程序。我也使用了 pnpm，但你可以使用你喜欢的包管理器（npm、yarn、bun...）。

完成后，Vite项目目录如下
⁠├── 公共
├── src/
│ └── 组件/
│ └──HelloWorld.jsx
├── .gitignore
├──index.html
├── package.json
├── README.md
└── vite.config.js

现在转到 vite.config.js 文件，这是文件默认的样子

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

接下来，我们将安装 Path 模块，我们用它来使用 path.resolve() 方法，这有助于创建绝对路径。

pnpm 我的路径

然后我们将解析 vite.config.js 文件中的路径别名，结果应该如下所示

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    }
  },
});

配置 VS Code IntelliSense

为了确保 VS Code 识别您的别名，请在项目根目录中创建或更新 jsconfig.json：

{
    "compilerOptions": {
      "paths": {
        "@/*": [
          "./src/*"
        ]
      }
    }
  }

然后我们可以更新我们的导入

import Button from '../../components/Button'
//to this
⁠import Button from '@/src/components/Button'

请注意，我们可以像这样创建路径别名，并解析任意数量的路径，然后更新我们的智能感知。我留下了自己的更简单的东西，因为我的项目很小，默认情况下，src文件夹包含所有项目文件，然后我可以将其指向src，但是当您在代码中多次使用组件文件夹时，您可以添加它路径别名以保持导入干净。再次建议避免过度使用别名：因为虽然它们可以简化导入，但过度使用它们会使您的代码对于新团队成员来说不太直观。对常用、经常访问的目录使用别名。

⁠    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
  },

潜在问题以及如何避免它们

1. 循环依赖：使用别名时要小心，以避免创建循环依赖。始终以保持清晰层次结构的方式构建导入。
2. 过度使用别名：虽然别名可以简化导入，但过度使用它们可能会使您的代码对于新团队成员来说不太直观。对常用、经常访问的目录使用别名。
3. 命名不一致：在整个项目中为别名坚持一致的命名约定。例如，始终使用“@”前缀作为别名路径。
4. 忘记更新 jsconfig.json：如果您在 vite.config.js 中添加新别名，请记得更新 jsconfig.json 以维持 IDE 支持。
5. 别名冲突：确保您的别名不与 npm 包名称或浏览器全局变量冲突，以避免混淆和潜在错误。

感谢您的阅读

以上是如何设置路径别名 Vite + React的详细内容。更多信息请关注PHP中文网其他相关文章！