反应导入根路径助手

Question

在反应中，因为我必须导入不同的助手或组件，所以我遇到了这个问题

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

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

找到相对路径真的很难而且很耗时。有没有 npm 或 helper 可以解决这个问题？

原文由 Alan Jenshen 发布，翻译遵循 CC BY-SA 4.0 许可协议

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'

原文由 Roman Maksimov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

那对我有用。

原文由 DigiBanks99 发布，翻译遵循 CC BY-SA 4.0 许可协议