Browserify 与 Zurb Foundation Framework

Question

POST-解决方案编辑

这是一个 Yeoman 生成器，用于搭建一个带有 Foundation 和 Browserify 的项目：https://github.com/dougmacklin/generator-foundation-browserify

我正在尝试找出如何正确捆绑 foundation framework js with 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 还是我做错了什么？

Answer 1

我相信您确实需要对库进行 browserify-shim。我目前正在我的项目中这样做，并且工作正常。我正在使用 Bower 来管理基础，但它应该与 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 之后用它来初始化文档。

Answer 2

有了 foundation 6 和最近的 jquery ("^2.1.0")，不再需要填充。你可以只使用

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

在您的 main.js 文件中。请注意，由于某种原因或另一种选择依赖于全局 jQuery（而不是使用 require）。

另请注意，alert 机制已在基础 6 中废弃，如果您想查看工作示例，请改用 closable alert callout。

Browserify 与 Zurb Foundation Framework

Browserify with Zurb Foundation Framework

jquery

zurb-foundation

browserify

gulp

browserify-shim