在前端开发中，随着技术的发展，我们经常需要使用一些工具来辅助我们完成开发工作。其中之一就是 generator-kbnvis 这个 npm 包。本文将详细介绍如何使用 generator-kbnvis 这个工具，帮助前端开发者更加高效地完成数据可视化的开发任务。
generator-kbnvis 的介绍
generator-kbnvis 是一个用于生成 Kibana 插件脚手架的 Yeoman 生成器，它可以帮助开发者快速开发符合 Kibana 规范的可视化插件。同时，生成器的使用也非常简单，只需要几行命令即可生成新的项目。
generator-kbnvis 的安装
使用 generator-kbnvis 前，需要先安装 yo 和 generator-kbnvis，可通过以下命令完成安装：
npm install yo -g npm install generator-kbnvis -g
生成项目
安装完成后，进入项目工作目录，运行以下命令生成新的项目：
yo kbnvis
然后，按照向导提示输入相应信息即可生成新的项目。
项目结构介绍
生成一个新的 kbnvis 项目后，其目录结构如下：
-- -------------------- ---- -------
-
--- ---------
--- -----
- --- --------
- --- -------------------------
--- -----------
--- ------------
--- ------
- --- ------
- --- ----------
--- ------
--- ------
--- --------其中，最主要的文件夹是 server 和 public。server 中存放的是该插件的路由和 API，而 public 则用于存放插件前端的 HTML、JS、CSS 等文件。
编写插件
生成插件之后，我们可以立即开始编写插件。对于一个存在于 Kibana 中的插件，应该包含以下部分：前端 UI、后端路由和 API。
编写前端 UI
前端 UI 一般是以 AngularJS 框架为基础，使用 HTML、CSS 和 JavaScript 进行开发。在这里，我们可以先在 public 中新建一个目录，比如说 “plugin_name”，然后在该目录下新建一个 index.html 文件。
-- -------------------- ---- ------- --------- ----- ----- ---------------------------- ------ ----- ---------------- ----------------- ------- ----- ------------------------------- ---------- -- ---- -------- ------- ---------------------- ------------------------ ------- -------
上述 HTML 代码基本包含了我们的前端 UI 的内容，其中：
ng-app属性定义了 AngularJS 应用的名称；ng-controller定义了 AngularJS 控制器的名称；{{ name }}则输出名称的内容，可以被控制器中定义的变量代替。
接下来，我们还需要创建对应的 CSS 文件。
h1 {
color: #333;
}编写后端路由和 API
接下来，我们需要编写后端 API 代码。在这里，我们将使用 ExpressJS 这个 Node.js Web 应用框架，在 server/routes/index.js 文件中添加以下代码：
-- -------------------- ---- -------
-------------- - -------- -------- -
--- ------ - ----------------------------
--------------------------------- -------- ----- ---- -
---------------- - - ------------------------------------ - -----
---
------ -------
--上述代码则定义 API 中的 URL /api/kbnvis/example。该 API 被请求时，将会返回服务器的根目录和“Hello, ”组成的字符串。
构建和运行项目
在项目开发完毕后，我们需要对该项目进行构建和运行。在项目根目录下，首先运行以下命令：
npm run build
在构建完成后，我们即可通过以下命令运行该插件：
bin/kibana --plugin-path=plugins
其中的 --plugin-path 指定了 Kibana 插件的工作目录，实际值应该是项目根目录中 plugins 目录的绝对路径。
在浏览器中，可以访问 http://localhost:5601 来查看插件运行的情况。
结论
在本文中，我们介绍了 npm 包 generator-kbnvis 的使用方法，并通过一个简单的示例向读者展示了如何使用该插件进行开发。通过学习本文，读者可以灵活地运用 generator-kbnvis，更加高效地完成数据可视化的开发任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559eb81e8991b448d7998