Browserify與Zurb基礎框架

這裏有一個約曼發電機腳手架出與基金會和Browserify項目：https://github.com/dougmacklin/generator-foundation-browserify

我試圖找出如何正確將foundation framework js與browserify捆綁在一起。

在我的項目文件夾中，我install it使用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組件不起作用。例如，alert元素無法正常關閉。

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

如果有幫助，這裏是一個plunkr，包括我的index.html，main.js，bundle.js，package.json和gulpfile.js。

我還在用browserify弄溼我的腳，我應該使用browserify-shim這個還是我做了其他的錯誤？

來源

2015-05-07 dougmacklin

隨着基礎6和最近的jquery（「^ 2.1.0」），不再需要勻場。您可以使用

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

在您的main.js文件中。請注意，由於某種原因需要將$和jQuery設置爲全局（即將它們附加到窗口對象）作爲基礎6，因此需要選擇依賴於全局jQuery（而不是使用require）。

另請注意，alert機制已在基金會6中被拋棄，如果您想查看實際示例，請改爲使用closable alert callout。

來源

2015-12-24 04:52:17 fxx

謝謝！這似乎現在也適用於Foundation 5項目。更新生成器：https：//github.com/dougmacklin/generator-foundation-browserify – dougmacklin

如果基礎是通過bower而非npm（節點）安裝的，則實際需要shiming請詳細閱讀browserify-shim –

我相信你必須browserify-shim圖書館。我目前正在做我的項目，它工作正常。我使用鮑爾管理基金會，但它應該與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的要求後，並用它來初始化文件。

來源

2015-05-08 00:12:06

非常感謝這確實讓它工作（首先我嘗試了涼亭，然後切換回npm和兩個工作）！我想說明的是，我不再需要用'var $ = jQuery = ...'來請求jquery，而只需使用'var $ = ...'。有一件事，你可以編輯你的答案，在'「... ... foundation.js」，'和'... foundation「之後刪除逗號，因爲它們會導致錯誤被拋出。 – dougmacklin

啊，是的，我在那裏有其他圖書館，所以我忘了刪除這些額外的逗號。我編輯它刪除它們，它不應該再拋出錯誤。很高興幫助你解決了這個問題。請標記爲已回答，以幫助其他人解決這個問題。謝謝 –

Browserify與Zurb基礎框架

回答

相關問題