mirror of
https://github.com/elastic/kibana.git
synced 2025-04-25 10:23:14 -04:00
a817517574
* Switch to Yarn (#15485) * switch to yarn * cleanup misc references to npm * [yarn] loosen dependency ranges so yarn will merge more deps * fix linting error now that moment uses ESM * [licenses] font-awesome changed the format of its license id * Use local yarn * Misc fixes * eslintignore built yarn file * Remove mkdir which doesn't do what it should do * Check build without upgrading lots of versions * Fix license check * too many moments * Better description * Review fixes * Lock to angular@1.6.5 * More specific version locks * Revert "More specific version locks" This reverts commit11ef81102e. * Revert "Lock to angular@1.6.5" This reverts commit3ade68c14c. * rm yarn.lock; yarn * Forcing a specific version of React, Angular, Moment * Using vendored version of yarn in ci * Use --frozen-lockfile * fixes * Update lockfile
103 lines
No EOL
3.9 KiB
Text
103 lines
No EOL
3.9 KiB
Text
[[development-dependencies]]
|
|
=== Managing Dependencies
|
|
|
|
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...
|
|
|
|
[float]
|
|
==== yarn (preferred method)
|
|
|
|
Once you've http://npmsearch.com[found] a dependency you want to add, you can
|
|
install it like so:
|
|
|
|
["source","shell"]
|
|
-----------
|
|
yarn add some-neat-library
|
|
-----------
|
|
|
|
At the top of a javascript file, just import the library using it's name:
|
|
|
|
["source","shell"]
|
|
-----------
|
|
import someNeatLibrary from 'some-neat-library';
|
|
-----------
|
|
|
|
Just like working in node.js, front-end code can require node modules installed
|
|
by yarn without any additional configuration.
|
|
|
|
[float]
|
|
==== webpackShims
|
|
|
|
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.
|
|
|
|
["source","shell"]
|
|
-----------
|
|
# 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:
|
|
|
|
["source","shell"]
|
|
-----------
|
|
import someNeatLibrary from 'some-neat-library';
|
|
-----------
|
|
|
|
[float]
|
|
==== Shimming third party code
|
|
|
|
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:
|
|
|
|
["source","shell"]
|
|
-----------
|
|
// webpackShims/jquery.js
|
|
|
|
module.exports = window.jQuery = window.$ = require('../node_modules/jquery/dist/jquery');
|
|
require('ui/jquery/findTestSubject')(window.$);
|
|
-----------
|
|
|
|
This shim is loaded up anytime an `import 'jquery';` statement is found by
|
|
webpack, because of the way that `webpackShims` behaves like `node_modules`.
|
|
When that happens, the shim does two things:
|
|
|
|
. Assign the exported value of the actual jQuery module to the window at `$` and `jQuery`, allowing libraries like angular to detect that jQuery is available, and use it as the module's export value.
|
|
. Finally, a jQuery plugin that we wrote is included so that every time a file imports jQuery it will get both jQuery and the `$.findTestSubject` helper function.
|
|
|
|
Here is what our webpack shim for angular looks like:
|
|
|
|
["source","shell"]
|
|
-----------
|
|
// webpackShims/angular.js
|
|
|
|
require('jquery');
|
|
require('../node_modules/angular/angular');
|
|
require('../node_modules/angular-elastic/elastic');
|
|
require('ui/modules').get('kibana', ['monospaced.elastic']);
|
|
module.exports = window.angular;
|
|
-----------
|
|
|
|
What this shim does is fairly simple if you go line by line:
|
|
|
|
. makes sure that jQuery is loaded before angular (which actually runs the shim above)
|
|
. load the angular.js file from the node_modules directory
|
|
. 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. |