如何在 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. 使用命令npm start启动您的npm start应用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/*"],
        }
    }
}

Answer 3

在 next.js 中，这对我有用=>

在根文件夹中，创建 jsconfig.json（如果使用 typescript，则为 tsconfig.json）文件。 然后添加这个

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

在根文件中创建一个“components”文件夹，然后它会是这样的：

// components/button.js

export default function Button() {
  return <button>Click me</button>
}


// pages/index.js

import Button from 'components/button'

 export default function HomePage() {
    return (
     <>
      <h1>Hello World</h1>
      <Button />
     </>
   )
 }