Managing jQuery plugin dependency in webpack
Choose the right source
When dealing with libraries such as jQuery, favor the unminified CommonJS/AMD versions over the dist ones. This applies to other libraries too. Doing this allows webpack to perform much more effective optimization like tree shaking or dead code elimination which may result in a reduced bundle size and improved load time for your app.
Using vendors.js
file
Use a vendors.js
file for libraries such as jQuery and popular frameworks such as React. This will ensure your application's codebase is tidier and third-party libraries are decoupled from your own code.
Global injection with ProvidePlugin
Utilize webpack.ProvidePlugin
to ensure $
and jQuery
are available globally across your project. Doing this would simplify the integration of jQuery plugins that anticipate these variables to be present in the global
scope.
Optimize bundle size with noParse
noParse
option can be used to exclude large libraries from being parsed. This can result in reduced build times and should be considered when dealing with larger libraries such as jQuery.
Using imports-loader and script-loader
The imports-loader
and script-loader
can be extremely helpful when working with legacy jQuery plugins. The imports-loader
can be used to inject global dependencies or to override a module's this
's value and can also be used to disable AMD. The script-loader
is useful when you want to import scripts globally.
Managing legacy and global scripts
In some instances where a plugin isn't designed to work with module bundlers, consider manually extending window.$
. Another common workaround to this is using the expose-loader
to allow usage of the module outside of the Webpack bundle.
Resolving plugin dependencies
When any of your files require the usage of a jQuery plugin, use the import $ from 'jquery'
line at the top of your file. This tells webpack to scan for any jQuery dependencies and resolve them for you automatically.
Deal with AMD in Legacy Modules
AMD (Asynchronous Module Definition) plays havoc with your webpack set up? The imports-loader
comes with a feature allowing you to disable AMD in the specific module. Buyer of the free market beware, plugins providing AMD definitions can conflict with webpack, an issue you will quickly learn to identify and internalize.
Going global with expose-loader
When you need some particular module to be available in global scope and window
object, use the expose-loader
. This route isn't recommended for every single module, it is referred to as the "nuclear option" within the comments of webpack's source code. Therefore, exercise caution when going this route.
Global scope access
Commonly used variables such as jQuery and $ should be assigned to the window
object to ensure their availability in the global scope. To assert dominance over scope boundaries in this manner, make sure none of your plugins lay claim to these properties as territories of their own.
Was this article helpful?