无配置项目中的绝对 ES6 导入路径？答案

【问题标题】：Absolute ES6 import paths in configureless project?无配置项目中的绝对 ES6 导入路径？
【发布时间】：2019-03-20 21:54:18
【问题描述】：

我想使用绝对导入，比如

import Button from 'components/iu/Button';

而不是

import Button from '../../../iu/Button';

应用程序已使用 create-react-app 创建。该应用目前没有webpack.config.js 或.babelrc。我不确定我可以在多大程度上创建这些文件并添加配置，以及 create-react-app 管道在多大程度上处理所有这些看不见的事情。

如何将绝对导入添加到项目中？

【问题讨论】：

弹出你的 CRA 然后你将有一个 webpack 配置文件需要更改。
@PlayMa256：我可以不弹出来吗？
不，你不能那样做。
谢谢。我会考虑弹出
使用绝对路径通常被认为是一个错误。如果components 确实是与某个特定位置无关的东西，那么让它实际上是它自己的node_modules 可能是最有意义的，在这种情况下你会自动获得这种行为。

标签： webpack ecmascript-6 babeljs create-react-app

【解决方案1】：

在您的根目录（src 文件夹所在的位置）中创建名为 .env 的文件。

将此行放入.env 文件中。

NODE_PATH=src

现在您可以使用绝对导入，例如 import Button from 'components/iu/Button';。

在 react-create-app 1.x 上测试。

【讨论】：

【解决方案2】：

@JaLe 是对的，正如他所说，这似乎只适用于 create-react-app。

此外，您还应该将以下文件添加到您的项目中，以便您的 IDE 可以为您提供正确的模块路径自动补全：

jsconfig.json

// Set up compilerOptions for VSCode, including how to resolve import statements (needed in accordance with the setup done in ".env")
{
  "compilerOptions": {
    "module": "es6",
    "baseUrl": "./"
  }
}

【讨论】：