Question

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

我尝试使用module-alis npm包，但没有成功。是否有可以根据文件夹名称或别名导入的插件？

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

Answer 1

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

NODE_PATH=src

然后重新启动开发服务器。您应该能够导入src内没有相对路径的任何内容。

注意我不建议调用您的文件夹src/redux，因为现在令人困惑的是redux导入是指您的应用还是库。您可以调用文件夹src/app并从app/...导入内容。

我们故意不支持@redux等自定义语法，因为它与节点分辨率算法不兼容。

Answer 2

已接受的答案中的方法已被取代。

创建React App现在具有另一种方式来设置here中所述的绝对路径。

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

使用以下命令在项目的根目录中创建/编辑jsconfig.json / tsconfig.json：

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

或者：

如果您使用的是TypeScript，则可以配置baseUrl设置在项目的tsconfig.json文件的editorOptions内部。

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

import Button from 'components/Button';

Answer 3

如果您尝试上面的Ben Smith's solution，如果发现eslint抱怨导入绝对路径，请将以下行添加到eslint配置中：

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

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

Answer 4

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

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

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

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

Answer 6

在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 7

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

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

<块引用>

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

文件：jsconfig.json

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

文件：src\pages\HomePage.js

import "App.css";

Answer 8

使用文件夹中的索引文件

从'./ mySubFolder / myComp'导出{默认};

Answer 9

使用 react-app-rewire-alias 解决方案。它不仅提供别名，而且还提供根目录中的多个src文件夹：

上述示例的配置如下：

// config-overrides.js:

const {alias} = require('react-app-rewire-alias')

module.exports = function override(config) {
  alias({
    "@redux": "src/redux",
    "@resource": "resource", // or "src/resource" if it is in src
  })(config)
  return config
}

这是用于简单的js项目。

有关更多信息，请参见文档 react-app-rewire-alias 。如何为ts项目配置或从 jsconfig.json 或 tsconfig.json 等加载路径。

Answer 10

没有一个答案对我有用。有些根本不起作用，而有些则起作用，但导入已在 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）

10 个答案: