はじめに
今更ですが、jqueryなどモジュール形式ではないjsファイルを結合して1つにまとめるにはどうすればいいのか？と思い立って調べてみました
Rollupなど新しいバンドラーではモジュール形式ではない古い形式のjsファイルの読み込みができないので、gulpを利用してjsファイルを順に読み込み結合します
結合するjsファイル
- jquery ・・・js1, js2で利用するので一番最初に読み込む必要がある
- js2.js ・・・js1から呼び出されるため、js2を先に読み込む必要がある
- js1.js ・・・js2を呼び出すため最後に読み込む(名前順(js1⇒js2)に読み込まれるとエラーになる)
- js2.js
js2.js
console.log('load js2.js');
function js2() {
console.log('called js2');
}
$(function() {
console.log('jquery.ready() in js2.js');
js1();
});
- js1.js
js1.js
console.log('load js1.js');
function js1() {
console.log('called js1');
}
$(function() {
console.log('jquery.ready() in js1.js');
});
console.log('js1.js call js2');
js2();
<script>タグでファイル順を考慮して読み込んでテスト
- テスト用html
jsファイル間の依存順を考慮して読み込んでいます(jqery⇒js2⇒js1)
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>js test</title>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/js2.js"></script>
<script src="js/js1.js"></script>
</head>
<body>
</body>
</html>
ログ(j2を先に読み込んでいるため、呼び出しエラーにならない)
※もしjs1⇒js2の順でで読み込むと未定義エラーが発生する
gulpでファイル間の依存関係(読み込み順)を考慮して結合する
gulpと結合に必要なモジュールを読み込みます
$ npm i -D gulp gulp-concat gulp-uglify
- gulp.src()で
globを利用せず、配列で結合するファイルを順に指定して結合します
※'gulp-uglify'はminify用(コメントを外すと、出力が１行になります)
all.min.js
// gulpfile.js
import gulp from 'gulp';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
gulp.task('default', function() {
return gulp.src(['js/jquery-3.7.1.min.js','js/js2.js','js/js1.js'])
.pipe(concat('all.min.js'))
//.pipe(uglify())
.pipe(gulp.dest('./js'));
});
jsファイルの結合を行います
$ npx gulp
- 結合したファイルを開くと、指定順(jquery⇒js2⇒js1)に結合されています
all.min.js
/*! jQuery v3.7.1 | (c) OpenJS Foundation and other contributors | jquery.org/license */
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}
/***** 中略 *****/
console.log('load js2.js');
function js2() {
console.log('called js2');
}
$(function() {
console.log('jquery.ready() in js2.js');
js1();
});
console.log('load js1.js');
function js1() {
console.log('called js1');
}
$(function() {
console.log('jquery.ready() in js1.js');
});
console.log('js1.js call js2');
js2();
結合後のファイルで動作確認
結合したファイルを読み込んで、コンソールに出力したログの順番が変わっていない(指定した順番で結合されている)ことを確認
index2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>js test</title>
<script src="js/all.min.js"></script>
</head>
<body>
</body>
</html>
おまけ(uglify-js)
UglifyJSでも結合できそうなので試してみました
- 結合順にファイルを指定して、1ファイルに結合します
$ npx uglifyjs ./js/jquery-3.7.1.min.js ./js/js2.js ./js/js1.js -o ./js/all.min.js
- 結合したファイルを開くと、指定順に結合されています（minifyも同時に行われていました）
all.min.js
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0)/***** 中略 *****/console.log("load js2.js");function js2(){console.log("called js2")}$(function(){console.log("jquery.ready() in js2.js");js1()});console.log("load js1.js");function js1(){console.log("called js1")}$(function(){console.log("jquery.ready() in js1.js")});console.log("js1.js call js2");js2();