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基础框架

回答

相关问题