Adding Third Party Libraries

There are various ways to include third party, or commonly referred to as ‘vendor’, libraries into AEM with the Webpack build process. You can see some of those ideas in this thread.

Our recommendation is to include them with AEM’s ClientLibs and only run them through AEM’s preprocessors, not through Webpack. By keeping these libraries out of Webpack, you keep the build lean, you don’t increase Webpack’s processing time, and you avoid conflicts between the vendor library and your project-specific setup, such as ESLint rules.

Example: Bootstrap

Here are the common steps to include Bootstrap:

1. Download the compiled and minified source from getbootstrap.com
2. Copy the minified version into a “vendor” folder within your ClientLib directory
3. Reference the files in the css.txt and js.tx files of the ClientLib, as you would do with any regular AEM project (more about this in AEM’s documentation: Using Client-Side Libraries)

css.txt

#base=../

vendor/bootstrap.min.css
webpack.bundles/components.bundle.css

js.txt

#base=../
    
vendor/bootstrap.min.js
webpack.bundles/components.bundle.js

But what about Webpack’s tree shaking?

In theory, tree shaking would be a great reason to process vendor libraries with Webpack to eliminate unused code out of vendor libraries. Unfortunately, tree shaking is only supported for JS files that use ES6 imports/exports. At the time of this writing, most libraries that are commonly used for front-end development in AEM are not written with using the ES2015 module syntax, thus import and export, so Webpack won’t eliminate any unused code. (See the lengthy discussion around this issue on Github.)