如何避免在create-react-app中使用相对路径导入(/../../../redux/action/action1)

Question

我一直在使用create-react-app包来创建一个React网站。我在整个应用程序中使用相对路径来导入组件、资源、redux等，例如：import action from '../../../redux/action'

我尝试过使用module-alis npm包，但没有成功。是否有任何插件可以根据文件夹名称或别名进行导入，即绝对路径？

例如：import action from '@redux/action' 或 import action from '@resource/css/style.css'

- Prem

---

两年过去了，CRA现在有了一种新的配置绝对导入的方法。请查看答案这里。 - Ben Smith

Answer 1

在项目根目录下创建一个名为.env的文件，并在其中写入以下内容：

NODE_PATH=src

然后重新启动开发服务器。您应该能够在不使用相对路径的情况下导入src内的任何内容。

请注意，我不建议将文件夹命名为src/redux，因为现在会让人困惑redux导入是指您的应用程序还是库。相反，您可以将文件夹命名为src/app，并从中导入app/...的内容。

我们故意不支持像@redux这样的自定义语法，因为它与Node解析算法不兼容。

- Dan Abramov

---

有关实现的更多细节可以在此处找到 - https://youtu.be/xHiCRpfZIO8 - Prem

这在我们本地可以工作，但是在 Jenkins 中构建时却不行（我们有一个 Node 应用程序中的 React 应用程序），无论如何，我们通过将以下内容添加到 React 的 package.json 文件中解决了这个问题： {"scripts": {"build": "NODE_PATH=./src react-scripts build"}} 现在构建也可以在我们的 Jenkins 设置中工作了。感谢您的提示！ - jwanglof

目前，如果你使用这种方法，create-react-app会显示一个过时的警告。现在推荐的方式是使用一个jsConfig.json文件：{ "compilerOptions": { "baseUrl": "src" } }。该文件可设置编译器选项，其中包括设置基础路径为src。 - Agustin Meriles

关于Agustin的评论，更多信息请查看此处：https://facebook.github.io/create-react-app/docs/importing-a-component#absolute-imports - Chasen Bettinger

该选项已被弃用，不应再使用... - dmitri

Answer 2

接受的答案中的方法已经过时。现在，Create React App有一种不同的设置绝对路径的方式，在这里记录。

总之，您可以通过以下步骤配置应用程序以支持使用绝对路径导入模块：

在项目根目录下创建/编辑jsconfig.json/tsconfig.json文件，并添加以下内容：

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

完成此操作后，您可以通过指定 "src" 的子目录（在以下示例中，components 是 src 的子目录）进行导入，例如：

完成此步骤后，您就可以通过指定 "src" 目录下的子目录（如以下示例中的 components 子目录）进行导入，例如：

import Button from 'components/Button'

- Ben Smith

---

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

@VigneshwaranChandrasekaran 那个链接已经包含在我的回答中了。请参阅“...在此处记录的设置绝对路径的方法（https://create-react-app.dev/docs/importing-a-component/#absolute-imports）”。 - Ben Smith

我更喜欢这个解决方案。 - puerile

我真的不会选择这个解决方案。它允许为所有/src子文件夹结构设置别名。这可能会在以后编写所有组件时创建许多设计和依赖问题，因为它隐藏了它的依赖关系，而更偏爱极简主义导入。我们必须明智地选择可以使用别名的内容和不能使用别名的内容。 - caedes

只是为了澄清，baseUrl 不仅适用于 Create React App，而且是一种通用的 TypeScript 设置，因此在其他情况下也应该可以使用 - 请参见 https://www.typescriptlang.org/tsconfig#baseUrl。 - Rhumborl

Answer 3

我们可以在webpack配置中使用webpack 2的"resolve"属性。 使用resolve的示例webpack配置： 这里，component和utils是包含React组件的独立文件夹。

resolve: {
        modules: ['src/scripts', 'node_modules'],
        extensions: ['.jsx', '.js'],
        unsafeCache: true,
        alias: {
            components: path.resolve(__dirname, 'src', 'scripts', 'components'),
            utils: path.resolve(__dirname, 'src', 'scripts', 'utils'),
        }
    }

之后，我们可以直接导入文件：

import UiUtils from 'utils/UiUtils';
import TabContent from 'components/TabContent';

Webpack 2 解析引用

- santosh

---

我使用create-react-app包，但无法修改webpack配置。有其他方法可以做到吗？ - Prem

webpack.config.js 可在以下路径中找到：/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js - santosh

不，不支持修改这些配置。你可以弹出，但这样会失去许多 CRA 的好处。请参见我的答案以获得支持的方法。 - Dan Abramov

Answer 4

如果你尝试了Ben Smith提供的解决方案，但发现eslint在导入绝对路径时出现问题，请将以下代码添加到你的eslint配置文件中：

settings: {
  'import/resolver': {
    node: {
      paths: ['src'],
    },
  },
},

将“src”替换为您自己的文件夹名称，如果您使用自己的样板，请使用您的文件夹名称。

- Abdurrahman Hafez

---

感谢提供参考，同时也为成功地将ESLint与解决方案完美结合而点赞。 - Ben Smith

Answer 5

2010年2月
在这上面浪费了大约一个小时。 以下是一个例子:

目标：在HomePage.js中导入App.css

myapp\src\App.css
myapp\src\pages\HomePage.js

文件：jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

File: src\pages\HomePage.js

import "App.css";

- Manohar Reddy Poreddy

Answer 6

craco或rewired `create-react-app` 的别名解决方案是 react-app-alias，适用于craco、react-app-rewired、customize-cra等系统。

根据这些系统的文档，需要在`package.json`中替换`react-scripts`并进行下一步配置。

react-app-rewired

// config-overrides.js
const {aliasWebpack, aliasJest} = require('react-app-alias')

const options = {} // default is empty for most cases

module.exports = aliasWebpack(options)
module.exports.jest = aliasJest(options)

craco

// craco.config.js
const {CracoAliasPlugin} = require('react-app-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {}
    }
  ]
}

all

的英译中：所有

在json中配置别名，可以像这样：

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "example/*": ["example/src/*"],
      "@library/*": ["library/src/*"]
    }
  }
}

将此文件添加到主TypeScript配置文件的extends部分中：

// tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  // ...
}

- oklas

Answer 7

我正在使用babel-plugin-module-resolver来解决我的项目问题。 babel-plugin-module-resolver 与 module-alias 相同。因此，我认为您应该只是使用 module-alias 来解决问题。

因为您没有告诉我们为什么使用 module-alias 失败了？所以我无法告诉您如何修复它。

在您不知道原因的情况下，请不要放弃您的解决方案！

- Quang Noi Truong

---

这在Create React App中不起作用。它不支持自定义Babel插件。 - Dan Abramov

Answer 8

在 package.json 文件中，将此代码放入 scripts 对象中，如下所示...

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
     "eject": "NODE_PATH=src/ react-scripts eject"
  },

这将使您的应用程序启用绝对路径导入

- parag patel

---

这给了我一个线索，如何修复我们的“react-scripts build”。请查看我的评论@dan-abramov的答案（https://dev59.com/i1cO5IYBdhLWcg3wzEqf#45214138）。谢谢！ - jwanglof

Answer 9

对我来说，这些答案都没有起作用。有些根本不起作用，而其他一些虽然起作用，但导入已经在src内部了，例如：

import something from 'path/to/file'。

而我想要做的是：

import something from 'src/path/to/file'

以下是我的解决方法：

tsconfig.json

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "rootDirs": [
      "src"
    ]
  },
  "include": [
    "src"
  ]
}

- Liran H