Browserify 与 Zurb 基础框架

Question

解决方案后编辑

这是一个 Yeoman 生成器，用于使用 Foundation 和 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 还是我做错了什么？

Answer 1

使用基础 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。

Answer 2

我相信您确实必须对库进行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 后使用它来初始化文档。