web-dev-qa-db-ja.com

外部依存関係でBrowserifyを使用するにはどうすればよいですか？

Browserifyをゆっくりと自分のサイトに導入しようとしていますが、すべてのjsを書き換えたくはありません。Browserifyビルドにバンドルされているjqueryやその他のライブラリのインスタンスを複製したくありません。

Jqueryを外部依存関係としてリストするモジュールを構築する場合、グローバルjqueryインスタンスをどのように指すのですか？また、mylibs globalを削除することも目標です（下の例を参照）。そのため、モジュールでは使用しません。

これは私がやろうとしていることです（擬似コード）。これは私のサイトのリポジトリにあります-モジュールではありません。モジュールはBowerとともにインストールされます。

var mylibs.jQuery = $.noConflict(); // global used by lots of existing code
module.exports = {
    jquery: mylibs.jQuery // can be imported by my module as require('jquery')
};

そのようなものが私が達成しようとしているものです。これは可能ですか？

javascriptjqueryperformanceintegrationbrowserify
43
cobbdb

browserify-shim を使用してこれを実現できます。次の内容を持つグローバルスコープのjQueryに依存する_mymodule.js_という名前のモジュールがあると仮定します。

_var $ = require('jQuery');

console.log(typeof $);
_

  1. Browserify-shimをインストールします。

    _npm install browserify-shim --save-dev
_

  2. Package.jsonファイルで、browserifyにbrowserify-shimを変換として使用するように指示します。

    _{
    "browserify": {
        "transform": [ "browserify-shim" ]
    }
}
_

  3. Package.jsonファイルで、browserify-shimにグローバルスコープでjQueryをjQueryにマッピングするように指示します。

    _{
    "browserify-shim": {
        "jQuery": "global:jQuery"
    }
}
_

  4. Browserifyを実行する

    _browserify mymodule.js > bundle.js
_

Bundle.jsを調べると、require('jQuery')が_(window.jQuery)_に置き換えられていることがわかります。

70
katranci

Browserify-shimはノードモジュール間で推移的ではありません。最上位（独自のpackage.json内）モジュールを正しくシムするために使用できますが、他のnpmパッケージ（独自のpackage.jsonファイル）内のモジュールをシムすることはできません。

これは、jQueryモジュールに依存するノードモジュール（たとえば、ピア依存関係を持つプラグイン）を扱う場合は扱いにくいですが、jQueryライブラリは外部にある必要があります。

私の解決策は、擬似コードに概念が似ていますが、browserify自体の助けを借りて、カスタムの「プリロードシム」を作成することでした。

  1. jqueryモジュールをbundle.jsの生成から除外しますが、それ以外の場合は通常どおりにバンドルをビルドします。

    ビルド要件を満たすために、適切なnode/npmモジュールをインストールします。除外される「外部」モジュールはnotバンドルに含まれますが、コンパイル依存関係の解決を満たすために必要です。

    browserify -x jquery .. > dist/bundle.js

  2. Jquery.jsというファイルを作成し、次のコンテンツを含めます。

    module.exports = window.jQuery; // or whatever

  3. just前のファイルを含むshim.jsを生成します。

    browserify -r jquery.js > dist/shim.js

    次に、ファイルを編集して、モジュール名としてjQueryを使用します。

  4. ブラウザーで、jquery（外部依存関係）、shim.js、次にbundle.jsをロードします。

    バンドルファイルが定義していないjqueryモジュールをロードしようとすると、shimファイルで定義された（以前の）モジュールにフォールバックし、カスタムコードを実行します。この場合、それは以前に定義されたグローバルをパイピングしています。

    または：browserify-shim "global："が試行することは、実際にはグローバルにのみです。

Browserifyモジュールを直接使用する-私は嫌がらせに再成長しているうなり声の代わりに-「より洗練された」ソリューションをもたらした可能性があります。

9
user2864740