Browserify 与 Zurb 基础框架 [英] Browserify with Zurb Foundation Framework
问题描述
解决方案后编辑
这是一个 Yeoman 生成器,用于使用 Foundation 和 Browserify 构建项目:https://github.com/dougmacklin/generator-foundation-browserify
<小时>我正在尝试弄清楚如何正确地将 foundation framework js 与 浏览器.
在我的项目文件夹中,我安装它以及 jQuery(它依赖于它):
npm install jquery foundation-sites --save
然后在我的 main.js
我有以下内容:
var $ = jQuery = require('jquery');varfoundation = require('foundation-sites');$(文档).foundation();
我包含 $ = jQuery = ...
因为如果我不包含 jQuery is not defined
错误.
但是,js 组件不起作用.例如,alert 元素无法正常关闭.
如果有帮助,这里有一个 plunkr,其中包含我的 index.html
、main.js
、bundle.js
、package.json
和 gulpfile.js
.
如果我使用 browserify-shim,我仍然对 browserify 感到不满为此还是我做错了什么?
解决方案 使用基础 6 和最近的 jquery ("^2.1.0") 不再需要填充.你可以使用
global.$ = global.jQuery = require('jquery');要求(输入内容");要求('基础站点');$(文档).foundation();
在您的 main.js
文件中.请注意,将 $
和 jQuery
都设置为全局(即,将它们附加到窗口对象)作为基础 6,出于某种原因或其他选择依赖于全局 jQuery(而不是使用 require
).
还要注意,alert
机制在foundation 6 中已被丢弃,如果您想查看一个工作示例,请使用可关闭的警报标注.
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">×</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.
这篇关于Browserify 与 Zurb 基础框架的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文