npm環境にて複数JSファイルを連結し1つのファイルに出力する方法について

Question

npm環境に複数のjsファイルがあり、1つのファイルにまとめて出力したいと思っていますが、
調べてもGulp環境での結合方法を説明したサイトが多く、参考サイトを見つけることができません。

例えば、scssファイルの結合ですと「@use」を使って1つのファイルにまとめて出力することができると思いますが、
そういったことをJSファイルでも行いたいと思っています。

rollupの様に結合時にコンパイルする等の動きは必要なく、プラグインも使用せず単純に1つのファイルにまとめるだけということがしたいです。
お知恵をお貸しいただけないでしょうか。どうぞよろしくお願いいたします。

Comments

[technocore]

ソースを連結する目的は何でしょうか？
まさかそれを実行する訳では無いですよね？

[Yui_note]

1つのファイルにまとめるのが目的です。

[technocore]

でしたら、OSのファイル操作の話なので、npmもgulpもなんら関係ないです。

[Yui_note]

その後別の方から、jsでできるとお話をお聞きできたのですが、今度はその書き方がわからずという感じでした。OSファイルの操作のお話なんですね。そちらの方向で解決できないかも調べてみます。
ありがとうございます。

[technocore]

そもそも一つにまとめる目的はなんですか？

Answer 1

例えば、scssファイルの結合ですと「@use」を使って1つのファイルにまとめて出力することができると思いますが、
そういったことをJSファイルでも行いたいと思っています。

SCSSの@useはネームスペースを借りる等のかなり高度な作業をやっています。
これはNode.js流儀のrequireをふんだんに使ったシステムを構築し、
ブラウザのJavaScriptにはrequireは無いからWebpackでbundle.jsファイルにコンパイルして使おうかと言ってるようなものです。

rollupの様に結合時にコンパイルする等の動きは必要なく、プラグインも使用せず単純に1つのファイルにまとめるだけということがしたいです。

この前提があるので、！？！？となってしまいます。

モダンなフロントエンドのJavaScript開発は
前述のWebpackを使うのが半ば当然みたいになっているので
覚えて使いましょう。

---

rollupの様に結合時にコンパイルする等の動きは必要なく、プラグインも使用せず単純に1つのファイルにまとめるだけということがしたいです。

この用途ならば自分でNode.jsのコードを組めば良いんじゃないですか？
Node.jsはRubyやPythonと対等に張り合える汎用スクリプト言語ですからね。

とりまプロジェクトルートに実行ファイル置き場を冠するbinディレクトリを作成して、
結合を意味するconcatみたいなファイルを作りましょうか。

$ cd [プロジェクトルートのパス]

# bin/concatの作成
$ mkdir bin
$ touch bin/concat
$ chmod +x bin/concat

# 固めたいJSファイル群はココに設置するものとする
$ mkdir -p assets/scripts
$ touch assets/scripts/a.js
$ touch assets/scripts/b.js

# くっついたJSファイルの吐き出し先
$ mkdir -p output

bin/concatの中身

拡張子がないファイルに実行権限を付与して実行した場合
スクリプト言語ならば1行目にこのように記述すればNode.js越しの実行になります。
こういうのをシバン等と呼びます。

#!/usr/bin/env node

const fs = require("fs");

// __dirnameはこのスクリプトファイルのディレクトリの絶対パスを示す
const assetsDir = `${__dirname}/../assets/scripts`;

let output = "";
for (let it on fs.readdirSync(assetsDir)) {
  // 拡張子を見てJSファイルでなきゃ捨てる
  if (!/\w.js$/.test(it)) continue;

  // バイナリオブジェクトで取れる事があるので.toStringメソッドを叩いてStringにしておくこと
  const file = fs.readFileSync(`${__dirname}/../assets/scripts/${it}`).toString();
  if (js != "") js += "\n";
  js += file;  
}

fs.writeFileSync(`${__dirname}/../output/bundle.js`, js);

Gulp使ってもこれと似たようなコードは記述しないといけないですからね。
因みにメソッドチェーンを駆使するとこんな感じ
コード量的にも許容範囲って感じですね。

まぁストリームで処理するGulpはメモリの問題で死ぬ可能性がぐっと下がりますが、
私の回答は馬鹿でかいファイルを読み込むと死にます。
まぁMB超えるようなファイルは作らないと思うので大丈夫ですかね。

#!/usr/bin/env node

const fs = require("fs");
const assetsDir = `${__dirname}/../assets/scripts`;
const output = fs.readdirSync(assetsDir)
  .filter(it => /\w.js$/.test(it))
  .map(it => fs.readFileSync(`${assetsDir}/${it}`).toString())
  .join("\n");
fs.writeFileSync(`${__dirname}/../output/bundle.js`, output);

---

【おまけ】ちょっと戻ってBashの力で解決する

ITで働くならシス管系女子は読みましょう。
そのくらいオススメ。

先程Node.jsでシコシココードを書きましたが、
CLIのコマンドの力があればわずか1行で解決します。
特定のディレクトリ配下のファイルなんてのはワイルドカードが使えるので文字通り一撃です。

$ cat assets/scripts/*.js > output/bundle.js

うまく動作したらpackage.jsonに登録

  "scripts": {
    "concat-js": "cat assets/scripts/*.js > output/bundle.js",
  },

$ npm run concat-js

Answer 2

無理にNode.jsでやらずに、シェルスクリプトでcatする、ぐらいのシンプルな手段でもいいのではないでしょうか？

Comments

[Yui_note]

catを使うやり方があるんですね。初めて知りました、ありがとうございます。