3

解决方案后编辑

这是一个 Yeoman 生成器，用于使用 Foundation 和 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，其中包括 my index.html、main.js、bundle.js和.package.jsongulpfile.js

我仍然对browserify感到困惑，我应该为此使用browserify-shim还是我做错了什么？

4

2 回答 2

9

使用基础 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 中被丢弃，如果您想查看一个工作示例，请改用可关闭的警报标注。

于 2015-12-24T04:52:17.170 回答
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 并使用它来初始化文档之后。

于 2015-05-08T00:12:06.483 回答