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

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

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

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

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

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

或者：

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

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

import Button from 'components/Button'

Answer 3

在您尝试上面Ben Smith 的解决方案后，如果您发现 eslint 抱怨导入绝对路径，请将以下行添加到您的 eslint 配置中：

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

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

Answer 4

我们可以在 webpack 配置中使用 webpack 2 解析属性。

使用 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 解析参考