Foundation-sites: Using foundation 6 js with brunch and npm instead of bower and webpack

Created on 11 Jan 2018  ·  5Comments  ·  Source: foundation/foundation-sites

I managed to create simple foundation 6 configuration in brunch. I installed foundation-sites using npm. However for npm to work with brunch it wants me to use CommonJS and foundation JS files use ES6/AMD and it doesn't recognize it.

I use:

var Foundation = require('foundation-sites'); in my entry file.

Brunch supports several JS module styles:

  • CommonJS (default)
  • AMD
  • Custom wrapper & definition

You can use either of these in your projects, however CommonJS is becoming the universal standard, and certain Brunch features, namely the NPM integration, only work with CommonJS. Additionally, most of the docs will assume you use CommonJS.

Any recommendation of what should I do? I really like brunch and I prefer it over webpack due to it's simplicity. Also idea of having only npm instead of bower eliminates unnecessary burden and makes structure clean. It is also recommended by brunch and documentation tells that npm is > bower and bower is dead.

Brunch does support Bower, however NPM is becoming de-facto standard for front-end packages. You may still want/need to use bower for some of your packages that aren't on NPM yet, or just copy these to vendor.

🚚 build

Most helpful comment

For now, you can use:

var Foundation = require('foundation-sites/dist/js/foundation');

All 5 comments

For now, you can use:

var Foundation = require('foundation-sites/dist/js/foundation');

It worked, thanks. However this will add all plugins even those I don't wanna use.

Sadly yes. We're working on a better build system.

Nice! I will be awaiting. Thank you for the support! 💪

Was this page helpful?
0 / 5 - 0 ratings