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

Question

我正在慢慢学习如何将事物分解成组件，但我的强制症对一个特定的组件很生气。我有一个包含许多不同卡片/面板的选项卡 View 。标准仪表板。但是，随着我添加新卡片(和 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

您可以将 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 { fetchUser, matchUser, stopMatchUser, fetchMatches } from '../../actions'
import { MatchingCard, MapCard, ImageCard, DocumentCard } from '../../components'