問題タブ [browserify-shim]

Browserify-shim に頭を悩ませて、自分のやりたいことを実現するのに本当に苦労しています。ドキュメントはかなり単純明快に見えますが、何かが欠けているに違いありません。

私はjqueryをvar $ = require('jquery')（それ自体でうまく動作します）使用できるようにしようとしていますが、グローバルwindow.$またはwindow.jQuery変数を参照するランダムプラグインも使用できるようにしています。

たとえば、私が使用しようとしているプラ​​グインは次のとおりです: https://github.com/jackmoore/zoom

オブジェクトを追加のメソッドで拡張し$、次のように window.jQuery を注入して IIFE にラップします。

私は gulp を使用して、npm のbrowserify(非推奨の ( gulp-browserify) ではなく) を使用して、簡単な方法でスクリプトをバンドルしています。

package.jsonそして、これが私のファイルのbrowserify部分です:

jqueryとjquery-zoom.js ファイルの両方が必要です:

そして、browserify shim 診断ツールの出力は、私にはかなり良さそうです。

しかし、私のスクリプトがブラウザーで実行されると、window.jQuery はまだ明らかに未定義です。何が問題なのですか？

私の問題を再現する、迅速でシンプルなリポジトリを作成しました： https://github.com/clementoriol/browserify-shim-test

ありがとう ！

そのため、現在、より大きなプロジェクトでBrowserifyを使用していますが、シムされている場合でも、Jquery Validationから「jQuery is not defined」を取得し続けています。私は他のjqueryプラグインも使用しています（ただし、これだけが頭痛の種です）。NPMによって実際にインストールされるのはこれだけです。彼らのドキュメントによると、プラグインではなく、jquery でさえも処理できるはずです。

http://requirebin.com/?gist=d60e92be0904fe44cf17

以下は、スケールダウンされた問題の例です。

(package.json のブラウザ フィールドを編集してファイルを指すようにできますが、それは機能しますが、直感に反する使用方法のように思えます)

Angularを外部に保ち、ビルドにバンドルしないで、Browserify-Shim Angular 2の方法を知っている人はいますか?

...

結果：

BrowserifyによってまとめられたDataTables Bootstrap スタイルを使用しようとしていますが、結果の Browserify バンドルを使用してページにアクセスすると、JS コンソールに「Uncaught Error: Cannot find module 'datatables'.

私のrequire('datatables');ステートメントは正常に機能し、DataTables を正常にロードしますがrequire('datatables-bootstrap');、ページをロードしようとするとロードされません。Browserify はバンドルを正常にコンパイルします。

bower install --save datatablesただし、jQueryを介してDataTablesファイルを取得しますnpm install --save jquery。 DataTables ソース ファイルは次のとおりです。

パッケージ.json

index.js

私はいくつかの React コンポーネントを定義する「ブラウザ化された」ライブラリを持っています。これは HTML ページ (Rails アプリから提供されます) からロードし、Rails によってページ内に配置されたデータによって供給される React コンポーネントをインスタンス化します。

（全体像は次のとおりです。TurboLinksアプリがあり、より多くの反応性が必要な非常に特定の部分にいくつかのReactコンポーネントを使用したい.Rails
ページは、Reactランタイムと必要なアプリケーションコンポーネントライブラリの両方をロードし、最小限の生を生成します必要に応じて React コンポーネントをインスタンス化するための JS)

私が見つけたのは、外部ライブラリ変数を自分のライブラリに公開する方法だけでしたが、自分の変数をグローバル ブラウザー スコープに公開したいと思います。

window.Stuff = Stuff;ソースファイルから直接クラスをかなり醜い方法（ ）でエクスポートすることになりまし.jsxたが、このコードは臭いがするように感じます...

そのようなことを達成するためのより良い方法に関する提案はありますか?

browserify-shimを介して外部ライブラリを使用するbrowserifyバンドルがあります。問題は、含まれているファイルの順序を手動で設定する必要がある index.html です。最初に外部ライブラリ、次に browserify バンドル - 異なる順序では機能しません。私の質問は、バンドルをビルドして、html ファイルでの順序を気にしない方法があるかどうかです。

編集：

これが私のアーキテクチャの外観です。javascript ファイルが必要です。

lib.js- 誰かが書いた外部ライブラリ

myBudnle.js-gulp経由でbrowserifyを使用して構築された私のコード：

および browserify-shim 構成: "browserify-shim": { "lib": "global:LIB" },

次に、index.htmlファイルがあり、両方のjsファイルが含まれていますが、これを特定の順序で行う必要があります

順序を変更すると (HTML ファイルを自動的に生成するため、これは頻繁に発生する可能性があります) で LIB が定義されmyBundle.jsておらず、ファイルを手動で並べ替える必要があります。ファイルが2つしかないので問題ありませんが、それでも避けたいと思い、この順序を自分で気にしません。

FileAPI ライブラリ ( https://github.com/mailru/FileAPI/issues/202 ) は CommonJS モジュールを正式にサポートしていません。browserify-shim を使用してみましたが、機能させることができません。requireingの後fileapi、空のオブジェクトが返されます。ここで再現用のレポを作成しましたhttps://github.com/Prinzhorn/browserify-fileapi

関連する package.json 部分

ローカルで試してみたい場合:

Chromium のコンソールを確認すると、実行中の空の配列が表示されますconsole.log(Object.keys(require('fileapi')))。window.FileAPI正しい API を持つグローバルがあることに注意してください。

browserify-shim が FileAPI をシムできるかどうかは誰にもわかりませんか? 依存関係を管理するためにいくつかのエキゾチックなことをしていると私は信じているからです（連結されたファイルは特定のグローバルを期待しています）。

私の目標は、HTML ファイルに次の内容を含め、すべてが適切に機能するようにすることです。

index.html:

したがって：

1. jQuery はグローバル$変数として使用できる必要があります。
2. それらは vendor.js の一部であるため、Bootstrap の JavaScript 関数も機能するはずです。
3. Myも機能し、を介してグローバル スコープで既に宣言されているapp.jsような変数を再宣言しないでください。$vendor.js

以下のファイルを参照してください。現在の解決策のエラー$(".myclass").doSomethingWithJquery();インターネットがオフになっていると、次のエラーが表示されます。

Uncaught ReferenceError: $ が定義されていません

...（おそらく）snackbarjsまたは別のモジュールがjQueryをグローバルスコープにリークしていると思います。

次に、行をvendor.js次のように変更すると、次var $ = jQuery = require('jquery');のエラーが表示されます。

Uncaught ReferenceError: $ が定義されていません

しかし、今では回線で呼び出されています$(document).ready(function.....

vendor.js3 番目に、完全にコメントアウトすると、両方のエラーが発生します。

Uncaught ReferenceError: $ が定義されていません

Uncaught ReferenceError: jQuery が定義されていません

グローバルスコープで必要な場合に、必要でない場合ではなく、変数を正しくシムするようにこのフロントエンドのセットアップを取得するにはどうすればよいですか??

gulpfile.js:

ベンダー.js:

package.json (browserify-shim構成):