將組件組合到一個庫

Question

我目前正在爲我的原生項目創建一個UI庫。 的組件分爲自己的文件，如：按鈕，文本框，面板等等等等

所以，當我想用​​他們我做的：

import Button from '../UI/button'; 
import TextBox from '../UI/textBox'; 

但我怎麼能impletement以下調用呢？不需要爲每個特定組件執行導入聲明。

import { Button,TextBox, SomeOtherComp } from '../UI/??'; 

這將節省大量的輸入，當我想用​​多個組件...

Answer 1

創建一個名爲index.js

這個文件的目的文件是簡單的暴露從所有可用的組件您的圖書館

import Button from './button'; 
import TextBox from './textBox'; 
... 

module.exports = { 
    Button, 
    TextBox, 
    ... 
}; 

在消耗你的UI庫中的代碼，你現在可以導入這樣的組件：

import { Button, TextBox, SomeOtherComp } from '../UI'; 

導入文件夾名稱時，軟件包將查找index.js文件並導入該文件夾。

Answer 2

有可能直接再出口的模塊，而無需編寫重複的代碼導入和導出：

// UI.js 

export { default as Button } from './button'; 
export { default as TextBox } from './textBox'; 

用法：

import { Button, TextBox } from './UI';