Skip to content

Instantly share code, notes, and snippets.

@rhaglennydd
Last active May 4, 2024 17:47
Show Gist options
  • Save rhaglennydd/abb2d27144e1a595e7c850b0a7611a21 to your computer and use it in GitHub Desktop.
Save rhaglennydd/abb2d27144e1a595e7c850b0a7611a21 to your computer and use it in GitHub Desktop.
Custom jQuery Build for a Webpack Flow

Custom jQuery Build for a Webpack Flow

Why?

Sometimes you don't need all of jQuery's modules. Officially, you can use their Grunt script to build a slimmed-down jQuery, but what if Webpack is more your thing? Enter this guide.

The Steps

  1. From your project root, install jQuery as a dev dependency:
npm i -D jquery

or:

yarn add -D jquery
  1. Copy the bootstrap jquery.js file from node_modules to your source directory. Call it something like jquery.custom.js:
cp node_modules/jquery/src/jquery.js src/js/jquery.custom.js
  1. Edit your copy and do a search-and-replace of ./ to the relative path that resolves to jQuery's src directory from your directory. Example: ./core becomes ../../node_modules/jquery/src/core.
  2. Comment out the modules you don't want. Be careful, there are some gotchas. For example, ajax/load is the only module that directly loads the parseHTML method, so don't comment it out if you need that.
  3. In your Webpack config, use the resolve.alias option so that modules that load jQuery will load your custom script:
module.exports = {
    ...
    resolve: {
        alias: {
            jquery: path.join(__dirname, 'src/js/jquery.custom.js')
        }
    }
    ...
};
  1. Compile away and enjoy a slimmer jQuery build!
define([
"../../node_modules/jquery/src/core",
"../../node_modules/jquery/src/selector",
"../../node_modules/jquery/src/traversing",
"../../node_modules/jquery/src/callbacks",
"../../node_modules/jquery/src/deferred",
"../../node_modules/jquery/src/deferred/exceptionHook",
//"../../node_modules/jquery/src/core/ready",
"../../node_modules/jquery/src/data",
"../../node_modules/jquery/src/queue",
"../../node_modules/jquery/src/queue/delay",
"../../node_modules/jquery/src/attributes",
"../../node_modules/jquery/src/event",
"../../node_modules/jquery/src/event/focusin",
"../../node_modules/jquery/src/manipulation",
"../../node_modules/jquery/src/manipulation/_evalUrl",
"../../node_modules/jquery/src/wrap",
"../../node_modules/jquery/src/css",
"../../node_modules/jquery/src/css/hiddenVisibleSelectors",
"../../node_modules/jquery/src/serialize",
/*"../../node_modules/jquery/src/ajax",
"../../node_modules/jquery/src/ajax/xhr",
"../../node_modules/jquery/src/ajax/script",
"../../node_modules/jquery/src/ajax/jsonp",*/
"../../node_modules/jquery/src/ajax/load",
"../../node_modules/jquery/src/event/ajax",
"../../node_modules/jquery/src/effects",
"../../node_modules/jquery/src/effects/animatedSelector",
"../../node_modules/jquery/src/offset",
"../../node_modules/jquery/src/dimensions",
//"../../node_modules/jquery/src/deprecated",
"../../node_modules/jquery/src/exports/amd",
"../../node_modules/jquery/src/exports/global"
], function(jQuery) {
"use strict";
return jQuery;
});
@gtempesta
Copy link

I've tried this approach and it's working even better than using the official way (with grunt). I wonder why this approach isn't mentioned in other guides (at least in the jQuery docs). Thanks a lot for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment