在开发 Kibana 前端环境中使用的插件时，您可能想要包含（至少）一个或两个库。虽然这在90%的情况下都是很简单的，但总会有一些异常值，而其中一些异常值还是在非常受欢迎的项目中。

在 Kibana 中使用外部库之前，您要先安装它。您可以通过如下方式安装：

npm （首选方法）

一旦您发现想要添加的依赖，您可以像这样安装它：

npm install --save some-neat-library

在 javascript 文件的顶部，只需要使用它的名称来导入库：

import someNeatLibrary from 'some-neat-library';

就像在 node.js 中一样，前端代码无需进行扩展配置就能请求 npm 节点模块安装。

webpackShims

当您想要用的库使用 es6 或 common.js 模块，但在 npm 上不可用时，您可以复制库的源文件到 webpackShim。

# 为新的库创建一个目录mkdir -p webpackShims/some-neat-library# 将您想使用的库下载到该目录curl https://cdnjs.com/some-neat-library/library.js > webpackShims/some-neat-library/index.js

然后，像往常一样在您的 JavaScript 代码中包含该库：

import someNeatLibrary from 'some-neat-library';

桥接第三方代码

一些 JavaScript 库声明它们依赖的方式并不会被诸如 webpack 的工具所理解。通常情况下，库不会导出它们提供的值，而只是将它们写入到全局变量里（或者某种意义上的变量）。

当将这样的代码拉入到 Kibana 中时，我们要编写 “桥接代码（shims）” 来整合第三方代码，以便与我们的应用、其他库和模块系统一起工作。我们可以使用 webpackShims 目录来做到这一点。

示例是解释如何编写桥接代码的最简单方式。下面是我们用于 jQuery 的 webpack 桥接代码。

// webpackShims/jquery.jsmodule.exports = window.jQuery = window.$ = require('node_modules/jquery/dist/jquery');require('ui/jquery/findTestSubject')(window.$);

由于 webpackShims 的行为类似于 node_modules ， 一旦 webpack 发现 import 'jquery'; 语句，桥接代码会被加载。当它发生时，桥接代码会做两件事：

下面是我们用于 angular 的 webpack 桥接代码：

// webpackShims/angular.jsrequire('jquery');require('node_modules/angular/angular');require('node_modules/angular-elastic/elastic');require('ui/modules').get('kibana', ['monospaced.elastic']);module.exports = window.angular;

如果您一行一行的看，会发现桥接代码做的很简单：