一個 import 的小技巧

熟能生巧。

簡述

這個是我在工作時碰到的問題，就是會碰到有一大堆東西要 import 時，你的 code 會長得像這樣：

// App.js
import Comp1 from "./components/Comp1";
import Comp2 from "./components/Comp2";
import Comp3 from "./components/Comp3";
import Comp4 from "./components/Comp4";
import Comp5 from "./components/Comp5";
import Comp6 from "./components/Comp6";
// ...略

function App () {
  return (
    <Router>
      <Routes>
        <Route path="path1" element={<Comp1 />} />
        <Route path="path2" element={<Comp2 />} />
        <Route path="path3" element={<Comp3 />} />
        <Route path="path4" element={<Comp4 />} />
        <Route path="path5" element={<Comp5 />} />
        <Route path="path6" element={<Comp6 />} />
        {/* ...略 */}
      </Routes>
    </Router>
  )
}

這時候 App.js 可能就會有好幾百行，但有 50% 都是在 import 那些元件。

如果你覺得這樣很不順眼的話，其實可以利用一種小技巧來把元件的部分給拆出去。

這邊我們要新建一隻 AllCom.js，這個檔案只負責用來 import 那些元件：

import Comp1 from "./components/Comp1";
import Comp2 from "./components/Comp2";
import Comp3 from "./components/Comp3";
import Comp4 from "./components/Comp4";
import Comp5 from "./components/Comp5";
import Comp6 from "./components/Comp6";
// ...略

export {
  Comp1,
  Comp2,
  Comp3,
  Comp4,
  Comp5,
  Comp6,
  // ...略
}

這樣子做以後呢，App.js 就可以改寫成這樣子：

// 現在只要一行就搞定
import * as All from "./components/AllCom";

function App () {
  return (
    <Router>
      <Routes>
        <Route path="path1" element={<All.Comp1 />} />
        <Route path="path2" element={<All.Comp2 />} />
        <Route path="path3" element={<All.Comp3 />} />
        <Route path="path4" element={<All.Comp4 />} />
        <Route path="path5" element={<All.Comp5 />} />
        <Route path="path6" element={<All.Comp6 />} />
        {/* ...略 */}
      </Routes>
    </Router>
  )
}

雖然很簡短，但這是蠻實用的方式。