問題タブ [browserify-shim]

browserifyを使用して、Angular jsを単一のスクリプトにパッケージ化しようとしています。requireメインファイル内から使用するとうまく機能しますapp.jsが、必要なモジュールの1つにapp.js独自のが含まれているrequire場合、依存関係はバンドルに含まれていません。

要約すると、app.js（レポの行へのリンク）で：

スプラッシュヘッダー.js :

socialButtons.jsには依存関係がありません。

browserify --list app.js必要に応じてリストsplashHeader.jsされず、作成されたバンドルbrowserify app.js -o bundle.jsには socialButton の JavaScript が含まれていません。もちろん、とにかくサイトを読み込もうとするとUncaught Error: Cannot find module 'social-button-directive'、splashHeader に到達しrequire('social-button-directive')ます。

また、私のモジュールは common-js と互換性がないため、 の「browser」オプションを使用してモジュール名をファイルの場所にマッピングしpackage.json、browerify-shim を使用していることに注意することも重要です。

package.jsonの関連セクション:

私はこれを午前中ずっと続けていて、完全に困惑しています。問題の最小限の例として役立つように、問題のあるプロジェクトを切り詰めました。物事をテストするには、clone して npm install するだけです。詳細を調べている場合は、動作中/動作していないバージョンの diff があります。

require('./ng-modules/socialButtons/socialButtons.jsサブモジュールを相対パス ( )`) でロードしようとしましたが、うまくいきませんでした。おそらく私は物事を間違ってシムしましたか？これに関する私のアプローチは、この記事から来ています。

編集：それは間違いなく私のbrowserify-shim構成です。モジュールを commonjs に変換し、package.json から browserf-shim オプションを削除すると、すべてが機能します。私はそれを突き止めるためにこれをすべて書く必要があったと思います。=/

一部の browserify 依存関係に browserify-shim を使用する必要がありますが、package.json を編集できません。gulp 内で browserify を使用しています。package.json 部分のすべてを API から排他的に指定することは可能ですか? 私は次のようなものを想定しています：

var $ = require('jquery');次に、jQueryをvar $ = jQuery;グローバルとして使用しているため、出力を に置き換えます。これは可能ですか？時

Angular での単体テストに ngMock を使用しています。これで、browserify \w Angular セットアップができました。私はいくつかの奇妙な行動をしています。require('angular-mocks'); テストとアプリの作業でangular-mocksをロードしたとき 。しかし、それを依存関係として Angular アプリ モジュールに読み込むと、Angular アプリは読み込まれなくなりますが、カルマ テストは引き続き機能します。

ngMock のコメントを外すと、アプリが読み込まれなくなります

私のbrowserify-shim：

私のテスト：

「ngMock」をコメントアウトするだけでアプリは機能しますが、Angular docs でロードするため、少し奇妙にangular.module('app', ['ngMock'])感じます.. browserify がモジュールを何らかの方法でラップするためですか?

よろしく、ニールス

script タグを介して Google Maps API v3 をダウンロードしています。次の (関連する) package.json構成を使用して、モジュールに依存関係を追加しています。

そして、次のようにしてファイルに依存関係を追加できます。

ブラウザでコードを実行すると、正常に動作します。問題は、Jest でテストを実行すると、「google」モジュールが見つからないというメッセージが表示されることです。

ノート：

この依存関係は、テスト自体ではなく、テストしているファイルで必要です。特に指定がない限り、Jest はすべての依存関係をモックすると思っていたので、これは紛らわしいと思いますが、私が見る限り、モックする前に依存関係を正しく満たす必要があります。

私が欠けているもの、またはどのようなアプローチをとるべきかについてのアイデアはありますか?

Browserify を使用してangular- girdを実装しようとしています。

次のような構成を使用しました。

しかし、その後、エラーが発生します：

「キャッチされていない TypeError: require.config は関数ではありません」(main.js)。

誰かが私を助けることができますか？angularGridBrowserifyで実装する最良の方法は何ですか?

私はrequirejsを使用し、テキストファイルを必要とするrequirejsサードパーティモジュールを持っていますrequire("text!somefile.txt")

これを、サードパーティのライブラリとしてコードを変更せずに browserify が読み取れるものに変換するにはどうすればよいですか?

私はプロジェクトで使用browserifyしており、モジュール のようなものではないため、owlCarouselBackboneをシミングしています。変換は機能しているように見えますが、本当に必要なときに機能しません。commonJSshim

私のapp.jsファイルは次のようになります。

と私settingsView

どこで私のpackage.json

それが私に与えているエラー：

キャッチされていない TypeError: this.$el.find(...).owlCarousel は関数ではありません

実行時に。しかし、$("div").owlCarouseldom の準備ができた後にコンソールで実行すると、動作します。

ソリューション後の編集

Foundation と Browserify を使用してプロジェクトをスキャフォールディングする Yeoman ジェネレーターを次に示します。

基盤フレームワークjs をbrowserifyに適切にバンドルする方法を見つけようとしています。

私のプロジェクト フォルダーに、jQuery と一緒にインストールします (これに依存します)。

それから私のmain.js中には次のものがあります：

$ = jQuery = ...そうしないとエラーが発生するため、を含めjQuery is not definedます。

ただし、js コンポーネントは機能しません。たとえば、アラート要素が正しく閉じられません。

それが役立つ場合は、ここに my 、、、およびを含むplunkrがあります。index.htmlmain.jsbundle.jspackage.jsongulpfile.js

私はまだ browserify で足を濡らしています。これにbrowserify-shimを使用する必要がありますか、それとも何か間違ったことをしていますか?