使用RN來寫iOS界面已經(jīng)好幾個月了级解，隨著項目代碼量的增加，在每個js文件的頭部通過require引用的模塊會越來越多田绑，難以管理勤哗。而且最要命的是，當(dāng)開發(fā)后期有時間了想重構(gòu)的時候掩驱，面對這一些通過絕對路徑或相對路徑引入的模塊芒划，真不知如何下手。
![]()
require引用
這幾天在學(xué)習(xí)nodejs時欧穴，順帶把這個痛點給解決了民逼。所以說吧，ReactNative對于初學(xué)者來說相當(dāng)不友好涮帘，我本來是做iOS的拼苍，用OC用得好好的，為了用RN我得學(xué)JavaScript调缨，學(xué)完了JavaScript還不能干活疮鲫，還得看一遍React吆你，了解什么是component，什么是state俊犯，什么是props妇多，當(dāng)我全部過了一遍心想踏入了前端的領(lǐng)域時，我還是不明白require的原理燕侠，還是不懂module.exports的原理者祖，總之有非常多不明白。然后我竟然還要去學(xué)node绢彤，這是后端的知識吶……廢話說到這七问，下面看一下RN里面如果想不用一大堆的require去引用，而是用官方的解構(gòu)來引用組件該怎么做杖虾。
require引用
一烂瘫、Component文件夾首先，假設(shè)我們把組件放在Component這個文件夾中
![]()
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')贷祈，
index.js文件
其實就是這么簡單呜达，我們以后在引用的時候再也不用去看這些文件在哪里，然后一個個去引用粟耻，直接導(dǎo)入一個Component查近，然后做解構(gòu)就好了。還有個可以自定義入口文件的辦法挤忙，但是要寫一下package.json這個文件霜威。這種方法我測試的時候通不過，所以沒有深究册烈，現(xiàn)在這種做法就能讓我重構(gòu)代碼的時候得心應(yīng)手了戈泼。官方也是這種做法，只不過官方會利用npm來增加一些其他的依賴，乃至于整個工程利用npm install后可以加載完整個工程矮冬。
