Menu icon Foundation
Exclude jQuery from app.js

I'm new to Webpack and I'm hoping to get some insight on an issue that has been giving me trouble for a few days now. I'd like to prevent jQuery from being bundled with the contents of our app.js file. Could anyone clarify whether this is possible when using the Foundation Zurb Template?

I've pored through various resources with minimal success. There are documented methods for excluding vendor files and libraries however the methods don't seem to fall in line with how Webpack is configured and deployed in this case. The end goal would be to exclude jQuery from minified production code so that it could be included independently.

Thanks in advance!

6.4.1javascriptjquerywebpack

I'm new to Webpack and I'm hoping to get some insight on an issue that has been giving me trouble for a few days now. I'd like to prevent jQuery from being bundled with the contents of our app.js file. Could anyone clarify whether this is possible when using the Foundation Zurb Template?

I've pored through various resources with minimal success. There are documented methods for excluding vendor files and libraries however the methods don't seem to fall in line with how Webpack is configured and deployed in this case. The end goal would be to exclude jQuery from minified production code so that it could be included independently.

Thanks in advance!

Michal Pandyra 11 months ago

These are the same resources I was going over but couldn't find a functioning resolution. Turns out I was overlooking the basic fact that the webpackConfig variable was being passed as a child inside of another object. Modifying the object to and passing it directly to webpackStream did the trick.

Thanks for getting me to have another look at it!

Jules Webb 11 months ago

Hi Michal/Rafi

I'm not that familiar with webpack and could use a little clarification.  

I found the webpacConfig directive in gulpfile.babel.js and I reviewed the links Rafi shared.  I'm thinking that I need to add the external directive within the webpackConfig, but I'm not sure where.  Can one of you help?

 

let webpackConfig = {
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
}

 

I'm thinking that if I add the bit below to the bit above that's suppose to exclude jquery. Is this correct?

externals: {
  jquery: 'jQuery'
}

Appreciate any insights
jules

Michal Pandyra 11 months ago

Hi Jules,

You're on the right track. The "externals" property would be a sibling to the "module" one in the webpackConfig variable.

let webpackConfig = {
  externals: {
    ...
  },
  module: {
    rules: [
      ...
    ]
  }
};

Jules Webb 11 months ago

Thanks Michal, that worked for me! 

Nathan 11 months ago

I tried the above but I get an error that 'module' is an unknown property. Is there anything else I need to do?

Michal Pandyra 11 months ago

Hi Nathan,

It sounds like you may be using a version of the gulpfile prior to the commit that opened up the scope of the webpackConfig variable. Previously the object defined in the variable was limited to a very particular subset of Webpack configuration options. There was commit to the GitHub repository a few weeks ago to make the variable a bit more intuitive.

See the change here:

https://github.com/zurb/foundation-zurb-template/commit/1952ee3b7fade492f9d99e5d1e019662f5b230c2

 

Nathan 10 months ago

Thanks Michal! Didn't realize there was an update since my last download! That fixed it.

Joel Seguin 3 months ago

To help clarifiy further regarding the externals property above, since I've had to dig in to better understand. 

Here's what I ended up doing to keep Drupal 8 and Foundation working nicely together. 

1) In the gulpfile.babel.js: 

Look for the webpackConfig section and add the lines in bold below.

This will NOT import jQuery into your app.js file (created by foundation's build). It will use jQuery that is already included by Drupal 8 by default.

 

let webpackConfig = {

  externals: {

    jquery: 'jQuery'

  },

  module: {

    rules: [

      {

        test: /.js$/,

        use: [

          {

            loader: 'babel-loader'

          }

        ]

      }

    ]

  }

}

 

2) This step is not necessary, but good to optimize Foundation's javascript app.js further. 

In the scr/assets/js/app.js file:

Comment out the following line... like so:
//import Foundation from 'foundation-sites';

And, then uncomment the following line... like so:
import './lib/foundation-explicit-pieces';

And, finally go into the scr/assets/js/lib/foundation-explicit-pieces and comment out libraries that you are not using in your project.