使用Zurb Foundation Framework进行Browserify

问题描述

Post-Solution EDIT

这是Yeoman生成器，用Foundation和Browserify构建一个项目：

---

我试图弄清楚如何正确捆绑 js与。

在我的项目文件夹，我以及jQuery（它依赖于）：

  npm安装jquery foundation-sites --save 
  

然后在我的 main.js 中有以下内容：

  var $ = jQuery = require（'jquery'）; 
 var foundation = require（'foundation-sites'）; 
 $（document）.foundation（）; 
  

我包含 $ = jQuery = ... jQuery没有定义错误。

js components don'但是，工作。例如，元素无法正常关闭。

 < div data-alert class =alert-box> 
 < a href =＃class =close>& times;< / a> 
< / div> 
  

如果有帮助，这里有一个包含我的 index.html ， main.js ， bundle.js ， package.json 和 gulpfile.js 。

我仍然用browserify弄湿我的脚，我是否应该使用 for this or am I do something else wrong？

解决方案

基础6和最近的jQuery（^ 2.1.0）不再需要匀场。你可以使用

  global。$ = global.jQuery = require（'jquery'）; 
 require（'what-input'）; 
 require（'foundation-sites'）; 
 $（document）.foundation（）; 
  

存放在 main.js 文件中。请注意，将 $ 和 jQuery 设置为全局（即将它们附加到窗口对象）是必需的，作为基础6出于某种原因选择依赖全局jQuery（而不是使用 require ）。

还要注意，在基金会6中已经放弃了 alert 机制，如果你想看一个实际的例子，可以使用。

POST-SOLUTION EDIT

Here's a Yeoman generator to scaffold out a project with Foundation and Browserify: https://github.com/dougmacklin/generator-foundation-browserify

---

I'm trying to figure out how to properly bundle the foundation framework js with browserify.

In my project folder, I install it along with jQuery (which it depends on):

npm install jquery foundation-sites --save

Then in my main.js I have the following:

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

I include the $ = jQuery = ... because if I don't I get a jQuery is not defined error.

The js components don't work, however. For example, alert elements fail to close properly.

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

If it helps, here is a plunkr that includes my index.html, main.js, bundle.js, package.json and gulpfile.js.

I'm still getting my feet wet with browserify, should I be using browserify-shim for this or am I doing something else wrong?

解决方案

With foundation 6 and a recent jquery ("^2.1.0") no shimming is needed anymore. You can just use

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

in your main.js file. Note that setting both $ and jQuery to global (i.e., attaching them to the window object) is required as foundation 6 for one reason or another choose to depend on a global jQuery (instead of using require).

Note also, that the alert mechanism has been discarded in foundation 6, if you want to see a working example, use the closable alert callout instead.

这篇关于使用Zurb Foundation Framework进行Browserify的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！