問題タブ [browserify-shim]

ソースをバンドルするためにgulp + browserifyを使用していますが、常に同じエラーが発生しました：jQueryが見つかりませんでした。SignalR クライアント JavaScript ファイルの前に jQuery が参照されていることを確認してください。SignalR get $ = 未定義...

ソースをベンダーとアプリの 2 つのバンドルに分割しました。ベンダー バンドルは、packages.json から lib の ID を取得し、バンドルはそれを必要とします。アプリ バンドルはメイン エントリを取得し、id の lib を bundle.external を使用してこのバンドルに渡します。

ここで私の packages.json :

ここで私の一口タク：

ベンダー バンドルにはエントリ ポイントがなく、lib のみが必要です。ここに私のアプリバンドルエントリ:

私はすでに browserify-shim transform をオプション global で使用しようとしていますが、これも機能しません。

インデックスページのスクリプトタグを介して、Google cdn から angular js を含めています。

私のpackage.jsonには次のものがあります：

また、複数の出力バンドルで grunt-browserify を使用しています。

私が直面している問題は、browserify-shim が global:angular を使用するように構成されているにもかかわらず、Angular ソースが出力ファイルの 1 つに含まれていることです。

次のモジュールを使用しています。

JavaScriptファイルでGulpを使用するために、Laravel 5.2でElixirとBrowserify Shimを使用してBrowserifyをセットアップしようとしていますが、これまでのところあまりうまくいきませんでした。これは非常に簡単なはずですが、そうではありません。

これが私のpackage.jsonです

gulpfile.js

エントリ スクリプトmain.jsは次のようになります。

app.js

つまり、 Utilsは$に依存し、Appは$とUtilsの両方に依存します。

ターミナルから gulp を打つと、bundle.js が正しく作成されます。すべてのスクリプトは、(予想どおり) Browserify コードでラップされています。package.json で構成したように、各スクリプトにはすべての依存関係が含まれているため、この部分も見栄えがします。

問題は、含まれているすべての依存関係が空のオブジェクトであることです。たとえば、app.js の Utils が空で、そのメソッド「doSomething」を呼び出そうとするとエラーが発生します。コンソール ログは、実際のオブジェクトではなく、空のオブジェクト " {} " を出力します。正しく含まれているスクリプトは jQuery だけで、空のオブジェクトではありません。

ここで何が問題なのですか？これを機能させるには、JS ファイルまたは構成を変更する必要がありますか? 私は解決策にかなり近づいているように見えますが、それでも機能せず、まったく使用できません。

Jasmine で単体テストを行うために karma-browserify を使用します。テストは正しく実行されますが、カバレッジ レポートにはソース コードではなくファイル インクルード パスが表示されます。これを再現するには、次のプロジェクトをインストールして「gulp unit」を実行します。

https://github.com/bshack/shackstack

カバレッジ レポートの内容の例を次に示します。

ここに私のkarma.configがあります：

何かご意見は？

browersify-shimjquery、bootstrap、およびカスタム js ファイルを 1 つの最終パッケージにバンドルするために使用しています。

私のカスタム js ファイルには、依存関係はありませんが、依存関係はjQueryありbootstrapません。

私は次のものを持っていますpackage.json

スクリプトファイルで、次のことを行う必要があります。

package.jsonで「 jquery 」にエイリアスを追加することと、実行することの間に違いはありますかvar window.$ = require('jquery');

いくつかの場所では、人々が上記の両方を行っているのを見てきましたが、1 つだけで十分ではないでしょうか?

次に、カスタム js ファイルが依存していない場合でも、とのrequire両方を明示的に指定する必要があるのはなぜですか。にすべてをバンドルするように指示する方法はありますか?とにかく、そこにすべての依存関係とエイリアスを伝えています。スクリプト ファイルで各モジュールを要求するための二重の努力はなぜですか。jQuerybootstrapbrowserify-shimpackage.json

HTMLファイルにスクリプトタグとしてjQueryを追加し、次のように操作するpackage.jsonために追加しました。browserify-shim

require('jquery')簡単な呼び出しでメイン スクリプト ファイルに公開できます。

問題は、内部的に a を実行するいくつかの jQuery プラグインを使用していることですrequire('jquery')。browserify 変換は依存関係の依存関係に適用されないため、browserify が見つからないためバンドルに文句を言いますjQuery。

これで、グローバル変換を適用することで解決できることがわかりました。簡単に行う方法が見つかりません。

Browserify のドキュメントによると、パッケージ ファイルにグローバル変換を適用できないため、次の機能は機能しません (そうなると思います)。

また、次のようにオプションを my に追加しようとしましたGruntfile.jsが、それでも機能しません。

最後のオプションは、browserify-shimすべての依存関係に手動で a を追加するpackage.jsonことですが、新しいプラグインを追加するたびに同じプロセスを繰り返さなければならないため、やりたくありません。

上記の問題を軽減するためのアイデアはありますか?

ブートストラップjsまたはその他のコンポーネントと連携してbrowserify-shimを適切に使用する方法を見つけようとしています。連結された JS ファイル全体を常に含めたいとは限らないため、モジュールを単一の shim に分割しました。これは私の package.json からの抜粋です。

モジュールが必要な場合はtwbs-alert、 で含めることができますrequire('twbs-alert')。未使用のコンポーネントは縮小プロセス中に削除されるため、コンポーネントを分割することは本当に重要ではありませんか?

編集

ブートストラップの v4 はes6で完全に記述されているため、インポート ステートメントを介してモジュールをインポートできるため、shim アプローチは廃止されます。

karma-browserify を browserify-shim と一緒に使用しようとしていますが、成功しません。エラーを再現するためのリポジトリは次のとおりです: https://github.com/pelizza/karma-browserify-shim

karma-browserify でファイルを前処理するときに、karma がシムされた依存関係を見つけられないように見えるため、browserify とバンドルするとすべてが正常に機能します。

私はこの問題について多くを見つけることができませんでしたが、スタックオーバーフローでのこの問題を除いて、解決策はありません: browserify-shim でシミングされたモジュールをロードしようとすると、karma-browserify がエラーをスローします