使用Zurb Foundation Framework进行Browserify

Question

后解编辑

这是一个Yeoman生成器,用于基础和Browserify建立一个项目:https://github.com/dougmacklin/generator-foundation-browserify

---

我正在试图找出如何正确地将基础框架 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>

如果有帮助,这里是一个plunkr,包括我index.html,main.js,bundle.js,package.json和gulpfile.js.

我仍然在使用browserify,我应该使用browserify-shim,还是我做错了什么？

Answer 1

基础6和最近的jquery("^ 2.1.0")不再需要填充.你可以使用

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

在你的main.js文件中.请注意,由于某种原因选择依赖于全局jQuery(而不是使用),因此需要将两者$和jQuery全局(即将它们附加到窗口对象)设置为基础6 require.

另请注意,该alert机制已在基础6中被丢弃,如果要查看工作示例,请使用可关闭的警报标注.