不要再写满屏import导入啦！

序言

如果打开一个文件，看到的全是满屏幕的 import 语句，这将是一种怎样的体验？

---

密密麻麻的import语句不仅仅是一种视觉上的冲击，更是对代码组织结构的一种考验。

我们是如何做到让import“占领满屏“的了，又该如何优雅地管理这些import语句呢？

本文将从产生大量import语句的原因、可能带来的问题以及如何优化和管理import语句几个角度来进行探讨。

import是如何“占领满屏“的？

《拒绝使用模块重导（Re-export）》

模块重导是一种通用的技术。在腾讯、字节、阿里等各大厂的组件库中都有大量使用。

如：字节的arco-design组件库中的组件：github.com/arco-design…

通过重导在comonents/index.tsx文件暴露所有组件，在使用时一个import就可以使用N个组件了。

// 不使用重导
import Modal from '@arco-design/web-react/es/Modal'
import Checkbox from '@arco-design/web-react/es/Checkbox'
import Message from '@arco-design/web-react/es/Message'
...

// 使用模块重导
import { Modal, Checkbox, Message} from '@arco-design/web-react'

 

Re-export一般用于收拢同类型的模块、一般都是以文件夹为单位，如components、routes、utils、hooks、stories等都通过各自的index.tsx暴露，这样就能极大程度的简化导入路径、提升代码可读性、可维护性。

Re-export的几种形式

1. 直接重导出

直接从另一个模块重导出特定的成员。

javascript

复制代码

export { foo, bar } from './moduleA';

墨觉文屋（mojuec.cn）是一个提供各类文章、视频、源码、小程序等资源的分享平台，用户可以浏览、下载、评论、收藏、上传自己的作品。本站还有文屋星球、畅聊、互动交流等功能，欢迎访问 …