node.js 複数のjsファイルを一つにまとめたい

やりたいこと

• init.js, proj.jsというファイルを連結して、all.jsを作成したい
• init.js, proj.jsのそれぞれを修正したら、all.jsも即更新したい
• サイトは複数あるのでその辺も良い感じにしたい

方法

何をするにしてもnode.jsは必須

• ファイルを合体させるスクリプトを自前で用意（node.js必須）
• node.jsのパッケージ（プラグイン）である「Webpack」を使う
• node.jsのパッケージ（プラグイン）である「Gulp」を使う

「Webpack」ってのを使えばいける…という話なんだけど、単純に複数のファイルを連結するだけ…の場合「Webpack」だと面倒なコトが起きる（※importっていうメソッド？か何かの記述が別途必要になるっぽい）

ファイルを合体させるスクリプトを自前で用意（node.js必須）

1. スクリプトを作成
2. 連結実行

スクリプトを作成

▼「make_all.js」という名前で作成（ファイル名は何でもOK）

const fs = require('fs');
const path = require('path');

const files = ['init.js', 'proj.js']; // 連結したいファイルたち
const outputPath = 'all.js'; // 出力先

let concatenatedContent = '';

files.forEach(file => {
  const content = fs.readFileSync(path.join(__dirname, file), 'utf8');
  concatenatedContent += content + '\n'; // 各ファイルの内容を改行で区切る
});

fs.writeFileSync(path.join(__dirname, outputPath), concatenatedContent);

連結実行

▼コンソールで実行

> node make_all.js

ファイル修正時に即時更新させたい

ファイルを連結するスクリプトを作りかえる

const fs = require('fs');
const path = require('path');

const files = ['init.js', 'proj.js']; // 連結したいファイルたち
const outputPath = 'all.js'; // 出力先

// ファイルを連結する関数
function concatenateFiles() {
  let content = '';
  files.forEach(file => {
    content += fs.readFileSync(file, 'utf-8') + '\n'; // ファイル内容を読み込み、改行で区切る
  });
  fs.writeFileSync(outputPath, content); // all.jsに内容を書き込む
  console.log('Files concatenated successfully!');
}

// ファイルの変更を監視
files.forEach(file => {
  fs.watchFile(path.resolve(__dirname, file), { interval: 1000 }, (curr, prev) => {
    if (curr.mtime !== prev.mtime) {
      concatenateFiles();
    }
  });
});

console.log('Watching for file changes...');

あとは「> node make_all.js」を実行しておけばOK
ただ、実行中は他のコマンドが叩けないので別のコマンドウィンドウを開くかバックグラウンドで実行させる必要アリ

コマンドを叩くのが面倒だし、make_all.jsをgitの対象から外すのも面倒…バッチファイルの作成

• バッチファイルを用意して、ダブルクリックするだけ…としたい
• make_all.jsをjsフォルダの外に出したい（gitの対象外のフォルダに置いておきたい）
• make_all.jsをサイトごとに用意するのが面倒

バッチファイルに「対象フォルダ」「連結したいファイル」「出力ファイル」をセットし、「> node make_all.js」を実行するときに引数にして渡す

バッチファイル: make_js.bat(ファイル名は任意)

※コメントとかで日本語を使うなら「CR+LF、SJIS」で保存しておくのが無難

@echo off

rem 対象フォルダ
set TARGET_DIR=C:\js

rem 出力ファイル名
set OUTPUT_FILE=all.js

rem 連結したいファイル(※1行で記載する場合、空白区切り)
set FILES=init.js proj.js

rem 連結したいファイル(※複数行で記載する場合、値をセットする際に前の「変数:%FILES% 」を追加)
rem set FILES=init.js
rem set FILES=%FILES% proj.js

node make_all.js %TARGET_DIR% %OUTPUT_FILE% %FILES%

make_all.js: make_js.batと同じ階層においておく

const fs = require('fs');
const path = require('path');

const [targetDir, outputPath, ...files] = process.argv.slice(2);

// ファイルを連結する関数
function concatenateFiles() {
  let content = '';
  files.forEach(file => {
    content += fs.readFileSync(path.join(targetDir, file), 'utf-8') + '\n'; // ファイル内容を読み込み、改行で区切る
  });
  fs.writeFileSync(path.join(targetDir, outputPath), content); // all.jsに内容を書き込む
  console.log('Files concatenated successfully!');
}

// ファイルの変更を監視
files.forEach(file => {
  fs.watchFile(path.resolve(__dirname, path.join(targetDir, file)), { interval: 1000 }, (curr, prev) => {
    if (curr.mtime !== prev.mtime) {
      concatenateFiles();
    }
  });
});

console.log('Watching for file changes...');

node.jsのパッケージ（プラグイン）である「Webpack」を使う

…頑張って調べたし、試しもした。

「init.js」「proj.js」から「all.js」を作成したら空っぽの「all.js」が作られた
→「エントリーポイントファイル」を作って「import」で何かしなくちゃいけない…ってことで挫折。

node.jsのパッケージ（プラグイン）である「Gulp」を使う

面倒そうなので未調査。