Browserifyとの依存関係としてjQueryを束ねないようにする

Question

私はインターネット上でこの問題の解決策を見つけることを試みてきましたが、うまくいく解決策を見つけることができません。私は現在、GulpとBrowserifyの最新バージョンを使用して、私が取り組んでいるWebサイトのJSをバンドルしています。以前はすべてのJSファイルを連結していましたが、今はモジュール設定に移行しています。

私が実行している問題は、特定の依存関係を複製することです。この例では、jQuery（v2.1.4）に焦点を当てます。ここに私の設定です：

main.js（すべてのページにロードされた）

page.js

window.jQuery = window.$ = require('jquery'); 
window.Vue = require('vue');  
require('jquery-validation'); 

// More JS that loads on all pages 

（各ページには、それがそのページに関連するスクリプトのための独自のjsファイルのしています）

require('remodal'); // This requires jQuery 

// Rest of the JS for this page... 

私が遭遇している問題は、現在、両方のjavascriptバンドルにjQueryがあることです。 Browserifyを使用して、jQueryをpage-speicific.jsの「外部」としてマークしましたが、スクリプトからjQueryを削除しましたが、エラーUncaught Error: Cannot find module 'jquery'が表示され、解決策が見つからないようです。

BrowserifyでjQueryを「除外」するか、require('remodal')の周りにtryブロックを置くと、代わりにUncaught TypeError: $(...).remodal is not a functionとなります。私はモジュールremodalがjQueryを必要としており、そこにロードされていないと推測しています。それはウィンドウに設定されていないので、実行が失敗します。

Answer 1

まあ、私の質問への答えが見つかりました。休息の夜が、私が答えを探すためにもっと明確に思えるようにするために必要だったものだと思います。

ある時点で、browserify-shim（およびbrowserify-global-shim）をチェックアウトしましたが、トップレベルの依存関係のみが分かります。 jQueryが依存関係の依存関係だった場合、これは機能しません。さて、私は以下のリンクを見つけたら、文書化されていない（少なくとも私はそれを見つけたことはありません）ことを発見しました{ global: true } shimをすべての依存関係に伝播させるように設定できます。

var b = browserify(); 
var globalShim = require('browserify-global-shim').configure({ 
    'jquery': '$' 
}); 
b.transform({ global: true }, globalShim); 

gulpを実行した後、私のページ固有のスクリプトはすべて、ウィンドウ変数としてjQueryを参照しました。

!(function(root, factory) { 
    if (typeof define === 'function' && define.amd) { 
    define(['jquery'], function($) { 
     return factory(root, $); 
    }); 
    } else if (typeof exports === 'object') { 
    factory(root, (window.$)); // <----------------- :D 
    } else { 
    factory(root, root.jQuery || root.Zepto); 
    } 
})(this, function(global, $) { 

出典：Shimming dependencies of dependencies with browserify-shim