3

ソリューション後の編集

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

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

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

npm install jquery foundation-sites --save

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

var $ = jQuery = require('jquery');
var foundation = require('foundation-sites');
$(document).foundation();

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

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

<div data-alert class="alert-box">
    <!-- close functionality not working -->
    <a href="#" class="close">&times;</a>
</div>

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

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

4

2 に答える 2

9

Foundation 6 と最近の jquery ("^2.1.0") では、シミングはもう必要ありません。あなたはただ使うことができます

global.$ = global.jQuery = require('jquery');
require('what-input');
require('foundation-sites');
$(document).foundation();

あなたのmain.jsファイルに。との両方をグローバルに設定する (つまり、window オブジェクトにアタッチする) 必要があることに注意してください$。jQueryファウンデーション 6 は何らかの理由で (を使用する代わりに) グローバル jQuery に依存することを選択しますrequire。

このメカニズムは Foundation 6 では破棄されていることにも注意alertしてください。実際の例を見たい場合は、代わりにクローズ可能なアラート コールアウトを使用してください。

于 2015-12-24T04:52:17.170 に答える
1

ライブラリをbrowserify-shimする必要があると思います。現在、プロジェクトでそれを行っており、正しく機能しています。私は財団の管理にbowerを使用していますが、npmでも同様のはずです。私のpackage.jsonの関連するセットアップは次のとおりです。

"browser": {
  "jquery": "./src/bower_components/jquery/dist/jquery.min.js",
  "foundation": "./src/bower_components/foundation/js/foundation.js"
},
"browserify-shim": {
  "jquery": "$",
  "foundation": "foundation"
},
"browserify": {
  "transform": [
    "browserify-shim"
  ]
}

var foundation = require('foundation');次に、 jQuery を要求した後、通常どおり Foundation を要求し、それを使用してドキュメントを初期化できます。

于 2015-05-08T00:12:06.483 に答える