web-dev-qa-db-ja.com

browserifyで縮小出力を取得する方法は？

browserify の使用を開始しましたが、縮小された出力をこぼす方法についてのドキュメントが見つかりません。

だから私は次のようなものを見ています：

$> browserify main.js > bundle.js --minified
javascriptnode.jsbrowserify
77
Fdr

Uglifyjsを介してパイプします。

 browserify main.js | uglifyjs > bundle.js

次のようにnpmを使用してインストールできます。

 npm install -g uglify-js
118
topek

3.38.xの時点で、私の minifyify プラグインを使用してバンドルを縮小し、使用可能なソースマップを保持できます。これは他のソリューションでは不可能です。できることは、圧縮されていないバンドルにマップすることです。 Minifyifyは、個別のソースファイルに完全にマッピングします（はい、coffeescriptにも！）。

21
Ben

または、 glifyify transformを使用します。これは、「Browselifyで処理される前にUglifyの「squeeze」変換を適用する利点があります。つまり、条件付き要求のデッドコードパスを削除できます。」

15
srgstm

新しいビルドプロセスを構築する方法を調査するために数時間を費やした後、私は他の人が私がやったことから利益を得ることができると思いました。この古い質問はGoogleで高く表示されているので答えています。

私のユースケースは、OPが要求したよりも少し複雑です。開発、テスト、本番の3つのビルドシナリオがあります。ほとんどのプロの開発者は同じ要件を持っているので、元の質問の範囲を超えることは許されると思います。

開発中、私はwatchifyを使用して、JavaScriptファイルが変更されるたびにソースマップで非圧縮バンドルを構築します。ブラウザにalt-tabを押して更新を行う前にビルドを完了させたいため、ugliifyのステップは必要ありません。とにかく開発中には何の利点もありません。これを達成するために私は使用します：

watchify app/index.js  --debug -o app/bundle.js -v

テスト用、本番とまったく同じコード（例：uglified）が必要ですが、ソースマップも必要です。私はこれを達成します：

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、Ubuntu 16.04でこれらの手順を使用しました。

メンテナンスされなくなったため、minifyifyの使用を停止しました。

私が共有しているものよりも良い方法があるかもしれません。 browserifyと組み合わせる前に、すべてのソースファイルを不正に使用することにより、優れた圧縮を得ることができるようです。あなたが私よりも多くの時間を費やしているなら、あなたはそれを調査したいと思うかもしれません。

Watchify、uglify-js、またはbrowserifyがまだインストールされていない場合は、npmを使用してインストールします。

npm install -g browserify
npm install -g watchify
npm install -g uglify-js

古いバージョンがインストールされている場合、アップグレードすることをお勧めします。特にuglify-jsは、コマンドライン引数に重大な変更を加えたため、Googleに表示される多くの情報が無効になります。

8
Gary Ott

ソースマップを保存しながら縮小するためにプラグインを使用する必要はもうありません。

browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js
3
user