如何清理模块中的导入语句

Question

我正在慢慢学习如何将事物分解为组件，但我的强迫症对一个特定的组件感到很生气。我有一个包含许多不同卡片/面板的选项卡视图。标准仪表板。然而，随着我添加新卡片（和 redux 操作），我的导入语句正在快速增长。

import { fetchUser, matchUser, stopMatchUser } from '../../actions/userAction'
import { fetchMatches } from '../../actions/matchAction'
import MatchingCard from '../../components/MatchingCard'
import MapCard from '../../components/MapCard'
import ImageCard from '../../components/ImageCard'
import DocumentCard from '../../components/DocumentCard'

整理这些的标准模式是什么？将所有这些类放在一个文件中？我打算创建一个导入文件，但我仍然处于添加许多导入的相同场景？

任何建议将不胜感激。

Answer 1

如果你使用 Webpack，你可以使用它的resolve.alias，你可以为你常用的文件夹（例如 src）设置别名，这样你就不用写这些长的相对路径了。

您可以进行设置，以便您执行以下操作：

import Component from "@/components/my-component.js"

... 其中@ 表示您的src 文件夹，或者只是：

import Component from "components/my-component.js"

无论您在文件夹结构中的哪个位置，这都有效，因为它是一个绝对路径。

// webpack.config.js

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};

Answer 2

这可能有点矫枉过正并且有点不相关，但它仍然是一个可能的解决方案。对于包含大量类似代码的大型项目，我将越来越多的 UI 定义为数据。

const formFields = [
  { id: 'name', type: 'string' },
  { id: 'size', type: 'integer' },
  { id: 'isPublic', type: 'boolean' }
]

基于type，它为我选择要使用的组件类型（文本字段、复选框等）和imports。这会将导入推送到一个通用的辅助函数，并显着减少代码库中 import 语句的数量。

此外，使用webpack 中的alias 功能可能会更容易找出这些路径。它还使重构文件夹结构变得更加容易。

Answer 3

您可以将index.js 添加到操作和组件目录中，这样您就可以在一行中导入更多内容

../../actions/index.js

export * from './userAction'
export * from './matchAction'

../../components/index.js

由于组件的默认导出，您可以像在操作中一样直接导出它们。

import MatchingCard from './MatchingCard'
import MapCard from './MapCard'
import ImageCard from './ImageCard'
import DocumentCard from './DocumentCard'

export {
  MatchingCard,
  MapCard,
  ImageCard,
  DocumentCard,
}

那么你的import语句就变成了

import { fetchUser, matchUser, stopMatchUser, fetchMatches } from '../../actions'
import { MatchingCard, MapCard, ImageCard, DocumentCard } from '../../components'

Answer 4

将所有组件放在一个文件中并不是一个正确的想法。 React 中组件的整个想法是模块化你的结构。

如果您不想在文件中包含如此多的导入语句，一个解决方案是创建一个单独的文件，您可以在其中拥有所有这些导出并从那里导出。

例如创建一个imports.js 文件

export { fetchUser, matchUser, stopMatchUser } from '../../actions/userAction'
export { fetchMatches } from '../../actions/matchAction'
export {default as MatchingCard} from '../../components/MatchingCard'
export {default as MapCard} from '../../components/MapCard'
export {default as ImageCard} from '../../components/ImageCard'
export {default as DocumentCard} from '../../components/DocumentCard'

现在在你的文件中你可以像这样导入

import {fetchUser, matchUser, stopMatchUser , fetchMatches, MatchingCard, MapCard, ImageCard, DocumentCard } from './path/to/imports.js

Answer 5

如果您要从同一个文件夹中导入多个组件，则可以通过在组件文件夹中创建 index.js 文件来减少导入行。

index.js

export * from './MatchingCard';
export * from './MapCard';
export * from './ImageCard';
export * from './DocumentCard';

您现在可以像这样导入组件了。

import { MatchingCard, MapCard, ImageCard, DocumentCard} from '../../components'

Answer 6

您的某些连接组件中可以有相当数量的导入，而且还不错。

将组件合并到一个文件中通常是错误的决定，最好将它们分开。

根据我的经验，有一个真正的解决方案 - 将事情分解成更小的组件。那么平均而言，每个文件的依赖项都会减少。

您还可以考虑其他抽象，例如 HOC (https://facebook.github.io/react/docs/higher-order-components.html)，它可以减少结果中组件的重复和多样性。