While developing plugins for use in the Kibana front-end environment you will
probably want to include a library or two (at least). While that should be
simple to do 90% of the time, there are always outliers, and some of those
outliers are very popular projects.

Before you can use an external library with Kibana you have to install it. You
do that using…

When a library you want to use does use es6 or common.js modules but is not
available with yarn, you can copy the source of the library into a webpackShim.

# create a directory for our new library to live
mkdir -p webpackShims/some-neat-library
# download the library you want to use into that directory
curl https://cdnjs.com/some-neat-library/library.js > webpackShims/some-neat-library/index.js

Then include the library in your JavaScript code as you normally would:

Some JavaScript libraries do not declare their dependencies in a way that tools
like webpack can understand. It is also often the case that libraries do not
export their provided values, but simply write them to a global variable name
(or something to that effect).

When pulling code like this into Kibana we need to write "shims" that will
adapt the third party code to work with our application, other libraries, and
module system. To do this we can utilize the webpackShims directory.

The easiest way to explain how to write a shim is to show you some. Here is our
webpack shim for jQuery:

load the angular-elastic plugin, a plugin we want to always be included whenever we import angular

use the ui/modules module to add the module exported by angular-elastic as a dependency to the kibana angular module

finally, export the window.angular variable. This means that writing import angular from 'angular'; will properly set the angular variable to the angular library, rather than undefined which is the default behavior.