Another Best Practice/How-To-Properly Question: jQuery

In a Zurb template project, I have some pages that I would like to invoke a little jQuery on (responding to a click of a button on that page, for example).

Normally, I would include jquery in the head and then write a script block:

However, using the Foundation Zurb template throws a bit of a wrinkle in here (because of web pack, I presume). Although I could put all my jquery code into my app.js, it seems odd to fill the app.js up with snippets of code for individual pages. On the other hand, I cannot get to $ otherwise, unless I also load jquery on the page. But this seems odd since now I would clearly have two jquery loads (one packed into Foundation/app.js, the other on the page itself) - if I understand correctly.

So, my question boils down to:

I want to write a jquery snippet on a single page without putting my snippet into app.js. What is the best way to do this?

For example, Abide. It seems odd to be forced to put my Abide handler in app.js when I only need it on a form page.

Thank you for your help.
cwl

scripts always in the fotter, right before </body>.

You can use the externals setting in webpack to exclude jQuery from the build.

Alternatively include just jquery.min.js, foundation.min.js and your scripts - this works also without webpack.

Write a single script tag which contains only the needed logic.

May I buy another clue for $1? Nothing I try can get me around:

TypeError: (document).foundation is not a function. (In '(document).foundation()’, ‘$(document).foundation’ is undefined)

I am pulling jquery from the cdn. I am setting $ at the top of the my app.js instead of importing it. I’ve tried a few variations…

Basically, I am just guessing here. I need a little more clarity.

Thank you.
cwl

This is what I have working, but it doesn’t seem “right”.

On pages that I want to use jQuery locally, I add the header (triggered by a handlebar):

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

However, my app.js looks like:

import $ from 'jquery';
import 'what-input';
window.jQuery = $;
require('foundation-sites');
...

I can then put abide validation and other jquery events in local script blocks on those pages.

It “works”. But does it work right?
cwl

Yes, this is the right approach.

If you want to use the webpack based ZURB template, yes this is correct. But you may need the externals config to prevent that jQuery is also in the compiled app.js file.

Personally I would not use the CDN but selfhost the jquery.min.js file. And move all scripts down right before </body>.

I am not sure I have it completely right though. I have the webpack.config.js in my root for builds, but it doesn’t seem to be picked up as on pages that I do not explicitly call for jquery – where I would expect foundation to break – foundation still works – which implies that jquery is still getting injected.

Still a little lost. I think I am close, but…

Thanks.
cwl

I got it. I just added the externals configuration to the web pack variable in the gulp file. Seems to be working now, correctly.