複数ファイルをbrowserifyするのにgulpを使うのを諦めた話
背景
browserifyは大変便利なコマンドです。
それ自体には、複数ファイルを処理するためのオプションはありません。
gulpとgulp-browserifyを組み合わせて複数ファイルを処理する方法があります。
結論
gulp-browserifyは、既にメンテナンスされていません。
npm scriptでnpm-run-allを使って置き換えました。
npm scriptで置き換え
gulp-browserifyの場合
srcディレクトリにあるclient.js
とexecute.js
を変換します。
const gulp = require('gulp')
const browserify = require('gulp-browserify')
const src = 'src/'
const dest = 'dest/'
gulp
.task('browserify', () => gulp
.src([
`${src}client.js`,
`${src}execute.js`
])
.pipe(browserify())
.pipe(gulp.dest(dest))
)
npm scriptの場合
npm script内の複数コマンドをまとめて実行するのに、大変便利なnpm-run-allというモジュールがあります。
実行したいコマンドをnpm-run-all cmd1 cmd2
という形で列挙することで、複数コマンドをまとめられます。
group-name:*
という指定で、グループ指定することができるので、ここではそれを使います。
まとめて実行するコマンドは、browserify
コマンドそのものです。
"scripts": {
"browserify": "npm-run-all browserify:*",
"browserify:client": "browserify -o dest/client.js src/client.js",
"browserify:execute": "browserify -o dest/execute.js src/execute.js"
}
置き換え手順
- npm i npm-run-all
- package.jsonにnpm scriptを追加
- 動作確認
- npm uninstall gulp gulp-browserify
- rm gulpfile.js
gulp-browserifyをやめた理由
READMEに大きく NOTE: THIS PLUGIN IS NO LONGER MAINTAINED と書かれています。
読みましょう(私は読まずに調査して、2時間使いました)。
gulp-browserifyはメンテナンスされていない
最後にpublishされたのがJan 7, 2015です。
gulp-browserifyが使っているbrowserifyが古い
使っているbrowserifyのバージョンは3.xです。
現在のbrowserifyの最新バージョンは13.0.1です。
ES6のパースに失敗することがある
requireした後で、アロー関数の引数でオブジェクトの分割代入をすると起きます。
具体的には
const {
EventEmitter
} = require('events')
const em = new EventEmitter()
em.on('data', ({
one,
two
}) => console.log(one + two))
em.emit('data', {one: 1, two: 2})
こういう感じです。
browserifyはJavaScriptのパーサーにAcronを使っています。
古いAcronのバグなのかな?と思っています。
issue をあげたところで、メンテされていない情報をもらいました。
これ以上は調べても、gulp-browserifyに取り込まれないので、調査をやめました。
もっと細かい背景
元々、ES6がブラウザに実装される以前の時代(2014年10月)に実装していました。
ES6をES5に変換するために、browserifyと同時にbabelifyを使っていました。
現在のバージョンのブラウザで、使用しているES6文法がそのまま動くのが確認でき、直前にbabelifyを外しました。
babelifyを使っていればbrowserifyの実行前に、ES5への変換されます。
ES6のパースエラーは起きなかったのではないかと思います(試していません)。
Author And Source
この問題について(複数ファイルをbrowserifyするのにgulpを使うのを諦めた話), 我々は、より多くの情報をここで見つけました https://qiita.com/ledsun/items/f54c11b084152d7fa482著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .