Exclude jQuery from Foundation CLI build process

Hi, I’m using the Foundation CLI build process but I need to use an external version of jQuery rather than compiling it into the app.js file.

I’m struggling to figure out how to do it, I’ve got as far as removing the reference to it from the dependencies section in the package.json file and then removing the import jquery from app.js but I’m getting a load of errors when I run foundation watch.

Has anyone had experience of building with an external jquery that can give me some pointers?

Which template do you use? Normally there should be some webpack config and you can define externals.

webpack will strip jQuery from the build then. See how we do it in foundation-sites:

See also the webpack documentation about externals:

Hi Daniel, thanks, would that webpack config be found in the foundation-sites folder in my node-modules directory? I’m using the Zurb template for the project.

Sorry! I see that there is a webpackConfig in my gulpfile.babel.js file, is that where I would add that externals option then?

Ok, I’ve managed to add the externals option to the config in my gulpfile.babel.js and jQuery is now excluded from the built file so I’m now able to use an external jquery.js file. Thanks Daniel!

I have one further issue in that I don’t want the rest of the JavaScript code that I write to get minified / compressed. Is there a way that I can have a completely un-minified version of the JavaScript including all of the Foundation JS and any JS that I have written and have that build and be free from any webpack messages in the JS file? Basically just plain readable JS? Or at least is there a way to not compress the JS that I write in my app.js file? Perhaps what I also need to do here is treat the Foundation JS as an external file in the same way that I am now doing with jQuery and only have my own JS processed? Sorry, I’m not very familiar with modifying Gulp / babel / webpack etc settings beyond the defaults of the standard Foundation 6 cli template.

No, as webpack applies its loader to it (which uses numbers and strings for the modules and connects them in the file). You may want to try rollup or some other bundler.

Probably possible with a custom config which handles them differently depending on the entry name / script name.

I think this question makes more sense in the webpack communities as this is out of the scope of this forum here.