Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
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.
Here are the common steps to include Bootstrap:
- Download the compiled and minified source from getbootstrap.com
- Copy the minified version into a “vendor” folder within your ClientLib directory
- 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)
#base=../ vendor/bootstrap.min.css webpack.bundles/components.bundle.css
#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
export, so Webpack won’t eliminate any unused code. (See the lengthy discussion around this issue on Github.)