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

Posted 2023-02-22

【中文标题】如何清理模块中的导入语句

【英文标题】：How to clean up import statements in modules

【发布时间】：2017-10-19 09:41:58

【问题描述】：

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

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

任何建议将不胜感激。

【参考方案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/')
    
  
;

【参考方案2】：

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

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

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

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

【参考方案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'

【参考方案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

【参考方案5】：

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

index.js

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

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

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

【参考方案6】：

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

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

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

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

【讨论】：

感谢您的回复，这似乎是有道理的。我看过 HOC，但真的很难理解它。我再试一次！