ES6模組(Module)載入知識總結（一）

實踐總結

在我專案的目錄結構最外層有一個components資料夾，裡面存放著專案用到的所有公共元件，每個頁面用到這些元件時，便通過import方法匯入相關元件。
但是當頁面複雜後，且隨著專案變大，這種使用import命令一次次匯入元件的做法就顯得非常繁瑣不優雅了。比如我的某個檔案:

import NavBar from '../../../components/NavBar';
import {FrameTextButton} from '../../../components/ButtonSet';
import StatePage from '../../../components/StatePage';
import ChooseBox from '../../../components/ChooseBox';
import InputScrollView from '../../../components/InputScrollView';
import ModalPassword from '../../../components/ModalPassword';
import AlertBox from '../../../components/AlertBox';
import ResultDetail from '../../../components/ResultDetail';
import ContractModal from '../../../components/ContractModal';
import IncomeRate from '../../../components/IncomeRate';
import DashedLine from '../../../components/DashedLine';

並且當元件開發的越來越多，components資料夾也越來越大，團隊開發時，其他同事往往不知道你開發了什麼元件，從而造成元件重複開發，使用率低等問題。
所以，為了解決以上問題，我對components模組進行優化。
整體思路是先按元件功能進行分塊，比如button類，textInput類，image類等等，在components資料夾裡再分資料夾；歸類完成後，在components資料夾裡建立一個index.js，裡面通過import把所有公共元件匯入，然後通過export把元件統一匯出。這其實是引入RN中包的概念。目錄大概如下：
|_components
|_buttons
|_textInput
|_image
|_index.js
外部使用如下：

import {
    NavBar,
    StatePage,
    ChooseBox,
    AlertBox,
    ResultDetail,
    ContractModal,
    IncomeRate,
    DashedLine
} from '../../../components/index';

然後在index.js中，對每個引入的元件寫上註釋，讓後續開發的同事能在裡面清晰的找到他需要的元件，達到一點面向文件開發的效果。

思考

解決完問題後，想到兩個問題：
1、 由於index.js匯入了所有的元件，然後其他頁面使用時直接載入index.js，如果我只用到其中的一兩個元件，那index.js中的其他元件會不會都載入了，如果真的載入了豈不是造成記憶體的浪費？
2、 RN中有require、exports、module.exports，還有import、export，這些都是一樣的東西嗎？

這兩個問題請看我的下一篇文章《ES6模組(Module)載入知識總結（二）》