使用RN來寫iOS介面已經好幾個月了，隨著專案程式碼量的增加，在每個js檔案的頭部通過require引用的模組會越來越多，難以管理。而且最要命的是，當開發後期有時間了想重構的時候，面對這一些通過絕對路徑或相對路徑引入的模組，真不知如何下手。

這幾天在學習nodejs時，順帶把這個痛點給解決了。所以說吧，ReactNative對於初學者來說相當不友好，我本來是做iOS的，用OC用得好好的，為了用RN我得學JavaScript，學完了JavaScript還不能幹活，還得看一遍React，瞭解什麼是component，什麼是state，什麼是props，當我全部過了一遍心想踏入了前端的領域時，我還是不明白require的原理，還是不懂module.exports的原理，總之有非常多不明白。然後我竟然還要去學node，這是後端的知識吶……

廢話說到這，下面看一下RN裡面如果想不用一大堆的require去引用，而是用官方的解構來引用元件該怎麼做。

一、Component資料夾

首先，假設我們把元件放在Component這個資料夾中

二、main.js到index.js

我們可以寫一個main.js檔案，裡面這麼寫
main.js

var Component = {
    BorderBtn:require('./BorderBtn/BorderBtn');
    YYNewTopBar:require('./YYNewTopBar/YYNewTopBar');
}

module.exports = Component;
 

然後在其他地方通過下面這行程式碼

var {BorderBtn, YYNewTopBar} = require('./路徑/Component/main.js')，

取得main.js裡面的元件。最基本的用法就是這樣。

不過如果你覺得這樣不爽，因為這樣就不是一個包了，在node裡面多個子檔案再加上其他配置檔案一起組成一個包（package），所以如果我想不引用main.js，像下面這樣：

var {BorderBtn, YYNewTopBar} = require('./路徑/Component')，

那麼，把main.js的檔名改為index.js就可以了，當你引用整個檔案的時候node會自動載入index.js中的內容。

其實就是這麼簡單，我們以後在引用的時候再也不用去看這些檔案在哪裡，然後一個個去引用，直接匯入一個Component，然後做解構就好了。

還有個可以自定義入口檔案的辦法，但是要寫一下package.json這個檔案。這種方法我測試的時候通不過，所以沒有深究，現在這種做法就能讓我重構程式碼的時候得心應手了。

官方也是這種做法，只不過官方會利用npm來增加一些其他的依賴，乃至於整個工程利用npm install後可以載入完整個工程。