Browserify with Zurb Foundation Framework

两盒软妹~` 提交于 2019-12-06 07:14:07

问题


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?


回答1:


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.




回答2:


I believe you do have to browserify-shim the library. I am currently doing that in my project and it is working correctly. I am using bower for management of foundation but it should be similar for npm. The relevant setup in my package.json is the following:

"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"
  ]
}

Then I can just require foundation as normal, var foundation = require('foundation'); after requiring jQuery and use it to initialize on the document.



来源:https://stackoverflow.com/questions/30111777/browserify-with-zurb-foundation-framework

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!