如何避免在 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'

Answer 1

我们可以在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 Resolve Reference

Answer 2

我正在为我的项目使用 babel-plugin-module-resolver 来解决该问题。 babel-plugin-module-resolver 也与 module-alis 相同。所以我认为你应该解决使用 module-alis 的问题。

因为你没有告诉我们为什么使用 module-alis 失败了？所以我不能告诉你如何修复它。

当你不知道原因时，不要放弃你的解决方案！

Answer 3

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

NODE_PATH=src

然后重启开发服务器。您应该能够在 src 中导入任何内容而无需相对路径。

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

导入内容

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

Answer 4

在 package.json 文件中，

像这样在脚本对象中弹出这段代码..

  "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"
  },

这将在您的应用中启用绝对路径导入

Answer 5

已接受答案中的方法现已被取代。 Create React App 现在有一种不同的方式来设置绝对路径，如记录 here.

总而言之，您可以通过执行以下操作将您的应用程序配置为支持使用绝对路径导入模块：

Create/Edit 你的 jsconfig.json/tsconfig.json 在你的项目的根目录下：

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

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

import Button from 'components/Button'

Answer 6

craco or rewired create-react-app的别名解决方案是react-app-alias for systems as: 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.config.js
const {CracoAliasPlugin} = require('react-app-alias')

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

全部

像这样在 json 中配置别名：

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

并将此文件添加到主要打字稿配置文件的 extends 部分：

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

Answer 7

在你尝试上面的之后，如果你发现 eslint 抱怨导入绝对路径，请将以下行添加到你的 eslint 配置中：

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

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

Answer 8

2010 年 2 月
浪费了大约一个小时。示例如下：

目标：在 HomePage.js

中导入 App.css

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

文件：jsconfig.json

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

文件：src\pages\HomePage.js

import "App.css";

Answer 9

None 个答案对我有用。有些根本不起作用，而另一些则起作用，但导入已经在 src 中，例如：

import something from 'path/to/file'.

而我希望能够做到：

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

我是这样解决的：

tsconfig.json

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

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

How to avoid using relative path imports (/../../../redux/action/action1) in create-react-app

reactjs

import

create-react-app

relative-path

absolute-path

react-app-rewired

克拉科

全部