Zenn
⚱️

commonJS でバレルファイルを作成する

2024/03/09に公開
JavaScript
#
commonjs
tech

1. 概要

拙著にて import と export を一行で書く方法を記載しました。

また、この手法が一般に "バレルファイル" と呼ばれることを知りました。

上記拙著は ECMAScript 文法であり、commonJSで記述する方法は言及していません。

「commonJS でも書けないかな？」と思い、調査と動作確認しました。

結果を記載します。

2. 想定する問題

  • ファイルごとに、モジュールを分割して定義している
  • 何らかの理由で、これら分割したモジュールのインポート処理を一か所にまとめたい

ファイル構成

◆「何らかの理由」の例

  • メインロジック側でインポートする際、分割したモジュール名をいちいち調べたくない
    • 言い換えると、分割したモジュールを一ファイルにまとめてインポートしておき、そのまとめたファイルを参照するだけにしたい
  • テストの際、一括でmock関数に置き換えたい

3. 結論

commonJSでも、バレルファイルに相当するファイルを作成できる。

以下のように書く。

分割したモジュールたち
module.exports.モジュール名 = () => {
  /*ここに処理を書く*/
}
import 処理をまとめた中間ファイル
module.exports = {
  ...require("分割したモジュールファイル1のパス"),
  ...require("分割したモジュールファイル2のパス")
};
メインのコード
const {
  モジュール名1,
  モジュール名2,
  ...
} =  require('import 処理をまとめた中間ファイル')

4. 動作確認

4.1. ファイル構成

.
├── import_layer.js
├── index.js
└── util.js

ファイル構成

  • util.js 、 および component.js に汎用モジュールを作成。
  • import_layer.js にて、 util.js と component.js の全モジュールをインポート & エクスポート
  • index.js をはじめとしたメインロジックにて、 import_layer.js から、必要なモジュールをインポート

4.2. サンプルコード

util.js
module.exports.hello = () => {
  console.log("hello!");
};

module.exports.nice = () => {
  console.log("nice!");
};
component.js
module.exports.great = () => {
  console.log("great!");
};
import_layer.js
module.exports = {
  ...require("./util.js"),
  ...require("./.component.js")
}
index.js
const { hello, nice, great } = require("./import_layer.js");

hello();
nice();
great();

4.3. 確認

$ node index.js 
hello!
nice!
great!

以上。

Discussion