React导入根路径助手

Question

由于必须导入各种帮助程序或组件，因此在做出反应时遇到了这个问题

import approxPerDay from '../../../utils/approxPerDay.js'
import otherstuff from '../components/otherstuff'

在另一个文件中可能是 import approxPerDay from '../utils/approxPerDay.js'

找到相对路径确实非常困难且耗时。有没有npm或助手可以解决此问题？

Answer 1

我遇到了类似的问题。我终于按照这篇文章解决了这个问题：https : //medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

1. 在 react 应用程序的根目录中创建一个 .env 文件
2. 添加一行 NODE_PATH = src/

那对我有用。

Answer 2

这取决于您的模块捆绑器。因为Webpack 2你可以做这样的事情：

module.exports = {
    ...

    resolve: {
        modules: [
            'node_modules',
            path.resolve(__dirname + '/src')
        ],
        alias: {
            src: path.resolve(__dirname + '/src')
        }
    },

    ...
}

相同的Webpack 1：

module.exports = {
    ...

    resolve: {
        root: [
            path.resolve(__dirname  + '/src')
        ],
        alias: {
            src: path.resolve(__dirname  + '/src')
        }
    },

    ...
}

比您将能够src用作这样的本机路径：

import approxPerDay from 'src/utils/approxPerDay.js'
import otherstuff from '../components/otherstuff'

Answer 3

你问的东西叫做“绝对进口”。“create React app”已经提供了标准的解决方案，建议在react项目的根目录中创建一个jsconfig.json文件。

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

稍后您可以像这样导入组件：

import Button from 'components/Button';

转到与导入组件相关的官方文档链接，您将找到绝对导入部分：

https://create-react-app.dev/docs/importing-a-component/

是的，完成更改后不要忘记重新启动反应服务器:)