反应导入根路径助手

Question

In react因为我必须导入不同的帮助器或组件我有这个问题

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

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

找到相对路径是非常困难和耗时的。是否有任何npm或帮助可以解决这个问题？

Answer 1

这取决于您的模块捆绑包。对于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 2

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

1. 在react应用的根目录中创建一个.env文件
2. 添加一行bcprov-ext-jdk16

对我有用。

Answer 3

如果需要指定 .env 文件和相对路径，IDE 需要知道它。 为此，以下几行适用于我的 IDE。

文件 jsconfig.json

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