3

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?

Improve this question

2 Answers 2

Reset to default
9

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks! This appears to now work for Foundation 5 projects as well. Updated the generator: github.com/dougmacklin/generator-foundation-browserify
actually shiming is required if foundation was installed via bower and not npm (node ) please read more on browserify-shim
1

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.

Improve this answer

2 Comments

Great thanks this did indeed get it working (first I tried bower, then switched back to npm and both worked)! I'd like to note that I also no longer need to require jquery with var $ = jQuery = ... and can instead just use var $ = .... One thing, can you edit your answer to remove the commas after "...foundation.js", and ..."foundation", as they cause an error to be thrown?
Ah yes, I had other libraries in there so I forgot to remove those extra commas. I edited it to remove them and it should no longer throw errors. Glad it helped solve the issue for you. Please mark as answered to help others coming across this. Thanks

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.