browserifyを使い始めたばかり、縮小された出力を流出させる方法についてのドキュメントが見つかりません。
だから私は次のようなものを探しています:
$> browserify main.js > bundle.js --minified
browserifyを使い始めたばかり、縮小された出力を流出させる方法についてのドキュメントが見つかりません。
だから私は次のようなものを探しています:
$> browserify main.js > bundle.js --minified
回答:
uglifyjsにパイプします。
browserify main.js | uglifyjs > bundle.js
次のようにnpmを使用してインストールできます。
npm install -g uglify-js
3.38.x以降、私のminifyifyプラグインを使用してバンドルを縮小し、引き続き使用可能なソースマップを使用できます。これは他のソリューションでは不可能です。できる最善の方法は、非圧縮バンドルにマップして戻すことです。Minifyifyは、マップを個別のソースファイルにまでさかのぼります(はい、coffeescriptにも!)
新しいビルドプロセスを構築する方法を調査するために数時間を費やした後、私は他の人が私がやったことから利益を得るかもしれないと思いました。この古い質問はGoogleで高く表示されているので、私は答えています。
私のユースケースは、OPが要求したよりも少し複雑です。開発、テスト、本番の3つのビルドシナリオがあります。ほとんどのプロの開発者は同じ要件を持っているので、元の質問の範囲を超えることは許されると思います。
開発では、JavaScriptファイルが変更されるたびに、watchifyを使用してソースマップを含む非圧縮バンドルを構築します。ブラウザーにAltキーを押して更新を押す前にビルドを終了させたいので、醜いステップは必要ありません。とにかく開発中は何のメリットもありません。これを達成するために私は使用します:
watchify app/index.js --debug -o app/bundle.js -v
テストには、本番環境とまったく同じコード(例:醜い)が必要ですが、ソースマップも必要です。私はこれを次のように達成します:
browserify app/index.js -d | uglifyjs -cm -o app/bundle.js --source-map "content=inline,filename='bundle.js',url='bundle.js.map'"
本番環境では、コードはuglifyで圧縮されており、ソースマップはありません。
browserify app/index.js | uglifyjs -cm > app/bundle.js
ノート:
これらの手順は、Windows 7、MacOS High Sierra、Ubuntu16.04で使用しました。
minifyifyが維持されなくなったため、使用を停止しました。
私が共有しているものよりも良い方法があるかもしれません。browserifyと組み合わせる前に、すべてのソースファイルを醜くすることで、優れた圧縮を実現できるようです。私よりも多くの時間を費やしている場合は、調査することをお勧めします。
watchify、uglify-js、またはbrowserifyがまだインストールされていない場合は、npmを使用して次のようにインストールします。
npm install -g browserify
npm install -g watchify
npm install -g uglify-js
古いバージョンがインストールされている場合は、アップグレードすることをお勧めします。特にuglify-jsは、コマンドライン引数に重大な変更を加えたため、Googleに表示される多くの情報が無効になります。