如何在 React 或 Next.js 中使用绝对路径而不是相对路径？

Question

我正在使用 React 并且我有多个组件在多个高阶组件中使用，我的导入有时会像这样import MyComponent from '../../../../components/MyComponent'我知道有一种更有效的方法可以通过更改 package.json 文件中的某些内容然后导入来导入它有点像这样import MyComponent from '@components/myComponent'，但我不记得我该怎么做，我该怎么做？

Answer 1

如果您使用的是 TypeScript，则可以使用jsconfig或 来完成此操作tsconfig。

1. 将 jsconfig.json 文件添加到项目的根目录。
2. 在 jsconfig.json 文件中添加以下代码。
3. 使用命令启动您的 React 应用程序npm start。

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

如果您使用 Next.js 这可能会有所帮助 https://nextjs.org/docs/advanced-features/module-path-aliases

Answer 2

在根目录下创建一个jsconfig.json并复制以下代码。重新启动 VSCode 以使更改生效 -

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