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

Question

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

Answer 1

您可以使用 jsconfig 来做到这一点。或 tsconfig如果您使用的是 TypeScript。

将 jsconfig.json 文件添加到项目的根目录。

在您的 jsconfig.json 文件中添加以下代码。

使用命令 npm start 启动您的 react 应用程序.

jsconfig.json

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

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