13

http://javascriptplayground.com/blog/2013/11/backbone-browserify/Browserifyのような多くの記事を読みましたが、常に以下のようなステップがあります:

$ browserify app/app.js | uglifyjs > app/bundle.js

これは、ブラウザでスクリプトを実行して動作を確認する前に行われているようです。コードを変更するたびにビルドする必要がない方法はありますか? 機能に似たもの...define()requirejs

4

2 に答える 2

11

今は2015年で、これにはdrqというライブラリがあります。内部で同期 xhr リクエストを使用するため、開発目的にのみ適しています。あなたはそれを含める必要があります：

<script src="drq.js"></script>

次に、ページの任意のスクリプトで require 呼び出しを実行できます。

<script>

var myModule = require('my-module'),
    myClass = require('./classes/my-class.js');

// etc.

</script>

それはあなたのウェブルートまでのノードモジュールを探すので、npm installそれより上ではないディレクトリでそれらを見つけてください. また、パフォーマンスを向上させるためのヒントを見つけることができるGitHub ページもご覧ください。

繰り返しますが、バンドルは本番環境に最適なソリューションであることを覚えておいてください。

于 2015-08-09T10:20:30.717 に答える
8

当初、以下の理由でこれを行うことはできないと言いましたが、意志があるところに方法があることを付け加えたいと思います。十分な時間と労力があれば、あなた (または誰か) がこのタスクを達成する方法を思いつくことができる (そしておそらくそうする) と確信していますが、現時点 (2013 年 12 月 12 日) の時点では、それを容易にするすぐに使えるツールがあります。

  1. browserify の「モジュール」は、node.js モジュールと同じ概念を使用して記述されています。コードを記述し、オブジェクトを介してパブリック メソッド/プロパティ/などをエクスポートしmodule.exportsます。ブラウザの Javascript は、この種のことをネイティブにサポートしていません。ブラウザでこれを容易にするためにいくつかのボイラープレート テンプレート (いくつかの情報はこちら) があり、それらは browserify と互換性がありますが...

  2. コードをブラウザ化すると、ブラウザ化スクリプトは構文を分析し、requireメソッドを介して使用可能にする必要があるモジュールを見つけます。この require メソッドは、モジュールが必要とするすべての依存関係のすべてのコードとともに、エクスポートする bundle.js で定義されます。これにより、 browserify が定義する require メソッドが同期的に動作し、あらゆる種類の Web 応答 (js スクリプトのロードなど) を待たずに、要求したモジュールへの参照をすぐに返すことができます。

Require.js の動作は、browserify とは根本的に異なります。Require.js は、define参照した構文を使用してパッケージを定義しrequire、コードが依存するモジュールを Require.js に伝えるために使用するメソッドを公開します。次に、Require.js は必要な依存関係を検索し、別のモジュール用にそれらをまだロードしていない場合は、新しいスクリプト タグを生成し、ブラウザにそのモジュールを強制的にロードさせ、完了するまでコードの実行を待機します。 . これは非同期プロセスです。つまり、JavaScript エンジンは、新しいスクリプトがダウンロード、解析、実行されるのを待っている間も、命令を処理し続けます。Require.js はこれらすべてをいくつかのコールバックでラップするため、すべての依存関係が満たされるまで待ってから、定義したコードを実行できます (これが関数を に渡す理由です)。requireとdefineであるため、require.js は準備が整ったときにそれらを実行できます)。

開発に変更を加えるたびにバンドルしたくない最大の理由は、イテレーションの速度です。パフォーマンス (つまり、バンドルの速度) を改善するために (browserify を使用して) できることは次のとおりです。

  • 開発中にコードを醜くしないでください。browserifyを使用してバンドルすることができます（ソースマップには必ず使用し-dてください）。これにより、バンドルのパフォーマンスが少し高速化されます（とにかく大規模なプロジェクトの場合）。
  • モジュールを少し分割します。相互に直接的な依存関係を持たないモジュールは、同時にビルドする必要はありません。複数のスクリプト タグを使用してアプリケーションにさまざまなモジュールを含めるか、browserify バンドル ファイルを連結することができます。コードの変更を監視し、コードの変更を含むモジュールのみをコンパイルするために、いくつかの面倒なタスクを絶対に設定できます。これにより、多くの無駄な CPU サイクルが削減されます。これは、browserify が複数のモジュールを解析して変換する必要がなく、変更されたモジュールだけを解析する必要がないためです。そこから、1 つの大きなバンドルに再連結するか、ページ上の複数のバンドル インクルードに固執することができます。
于 2013-12-12T18:58:29.460 に答える