回到部落格

2025-08-22

【React開發中】Barrel File 實戰筆記：整理Components不煩惱

【React開發中】Barrel File 實戰筆記：整理Components不煩惱

原文發表於 Medium。

我又浮出水面了，最近一年真的是太忙了．．．（淚

Photo by ELEVATE: https://www.pexels.com/photo/barrels-on-trailers-1267359/

分享一件我在開發React 專案的時候常遇到小麻煩：組件多了之後，import 路徑會變得又長又亂 。例如一個簡單的頁面，可能就會看到這樣的代碼：

import Button from '../components/Button';  
import Card from '../components/Card';  
import Header from '../components/Header';  
import Footer from '../components/Footer';  
．  
．  
．  
．

雖然這樣不算錯，但看久了就是覺得「好雜亂」，而且每次要新增組件時都要手動 import。
這時候就輪到 Barrel File（直翻叫做『桶文件』…） 出場了。

什麼是 Barrel File？

簡單來說，它就是一個 集中匯出的入口檔案 。
放在目錄底下，專門用來把其他模組或元件整理好，再一次性對外暴露。

有了它，上面那段雜亂的代碼就可以變成：

import { Button, Card, Header, Footer } from '../components';

是不是瞬間清爽很多？

為什麼要用 Barrel File？

我整理了三個最常見的理由：

  1. 統一導出
    不需要一個個 import，每個組件都可以直接從Barrel File拿出來，一行解決。
  2. 簡化路徑
    少了 ../components/Button 這種重複路徑，直接從 ../components 進來抓檔案。不用關心每個components的資料層級（如果你很愛自己手刻各種有子類型的Button樣式，你會懂我說什麼）
  3. 乾淨API與程式碼
    從導入的檔案中只看到一個「入口」，縮減了程式碼的行數。

語法怎麼寫？

Barrel File最常見的模式長這樣：

export { default as Button } from './Button';

這行其實在做四件事：

  • from './Button' → 指定來源檔案
  • default → 匯入檔案裡的 default export
  • as Button → 重新命名為 Button
  • export → 再導出給其他檔案用

所以只要把所有組件都列出來，就能變成一個完整的Barrel File，例如：

export { default as Button } from './Button';  
export { default as Card } from './Card';  
export { default as Header } from './Header';  
export { default as Footer } from './Footer';  
export { default as ProgressBar } from './ProgressBar';  
export { default as Section } from './Section';  
export { default as StatCard } from './StatCard';  
export { default as RadarChart } from './Chart/RadarChart';

實戰觀察

我曾在團體合作實際專案裡跑過一輪搜尋，發現一個有趣的事：
專案裡雖然有 components/index.ts，但沒有人真的用它 。大家還是習慣直接 import元件：

import Button from "../components/Button";  
import Card from "../components/Card";

欸！這樣就搞笑了啦，這個團隊是都沒有在Code Review的嗎？（偷臭？）

但不得不說，對小型專案來說，硬使用Barrel File 反而會造成「多餘的維護成本」。因為每次加新組件都要記得更新 index.ts，結果最後根本沒人用它。因此還是建議，等到哪一天想要好好整理Components時再來使用它吧。

我的結論

  • 如果是小專案 ：直接用原始的個別 import方式，最單純也最省事。
  • 如果是中大型專案，或想做成組件庫 ：
    Barrel File 就非常值得用。因為它能大幅減少 import 散落的問題，讓整個程式碼看起來乾淨俐落。

心得

有時候專案資料夾就像家中的客廳，當東西多到「沒腳路可走（台語）」的時候就會想要大肆整理一番。Barrel File 雖然不是必須品，但它是一個很實用的小技巧。，當你組件多到開始覺得雜亂時，它就能派上用場。

我現在的做法是：小專案不要用，等到專案的體積漸漸失控，我才來使用 Barrel File。
畢竟元件不多還要寫個入口檔案，真的是過度設計了，在開發初期能解決問題才是重點。

以上就是我的分享啦，若你也喜歡這樣的文章，還請給我幾個掌聲，你的支持是我寫下去的原動力！