如果你正在开发一个基于 Kibana 的 web 应用程序，那么你一定会对 @elastic/babel-preset-kibana 这个 npm 包感兴趣。这个包是一个 Babel 预设，它包含了许多常见的依赖项和插件，以帮助你实现在 Kibana 中进行前端开发所需的新特性。本文将介绍如何使用该 npm 包，并给出一些示例代码。
安装 @elastic/babel-preset-kibana
你可以在你的项目中通过以下命令安装 @elastic/babel-preset-kibana：
npm install --save-dev @elastic/babel-preset-kibana
使用 @elastic/babel-preset-kibana
要使用 @elastic/babel-preset-kibana，你需要在 Babel 配置文件中添加以下代码：
{
"presets": ["@elastic/kibana"]
// 其他配置...
}配置选项
你可以将选项对象传递给 preset，在对象中设置各种配置。以下是一些常见选项的描述：
- target: 由于 Kibana 的集成测试环境使用 Jest 作为测试运行器，并且默认使用 jsdom 作为 DOM 模拟器，所以该选项默认为 "jest"。如果你要使用 Karma 或其他测试运行器，可以把它设置为 "browser" 或 "node"。
- coreJSTarget: 由于 Kibana 版本 7.10 后使用了 Node.js 14.x，可以在项目中安装 @babel/runtime-corejs3 模块，然后可以在 Babel 配置文件中将 coreJSTarget 设置为 "14.17"。
- sourceMaps: 该选项用于开启或关闭源代码映射。如果你需要调试其生成的代码，那么需要把该选项设置为 true。
以下是一个示例配置：
-- -------------------- ---- -------
-
---------- -
------------------- - ------------- ---- --
--
---------- -
------------------------------------- - --------- ---- ---
------------------------------------------- - -------- ---- --
-
-示例代码
在本节中，我们将提供一些示例代码来演示如何使用 @elastic/babel-preset-kibana。
使用类装饰器
在为 Kibana 编写新的 UI 组件时，可以使用类装饰器 @kbn/ui-react/decorators，在应用程序的任何地方定义新的组件并且它的名字会自动注册到 Kibana 的组件库中。
-- -------------------- ---- -------
------ - --------- - ---- --------
------ - --------- - ---- ---------------
------ - ------------------------ - ---- ----------------------------------
------ - ------------------------ - ---- ------------
------ - ---------------- - ---- ----------------------
------ - --------------- - ---- -------------------
------------
--------- --------------------
--------- -- -- -------------------------
--
------ ----- --------------- ------- --------- -
------------------ -------- -
------------ ---------
-
-------- -
------ -
-----
---------- ----------- -- ------------------ -----------------
----- --
------------
------
--
-
-
----- ------ - --------- --------------------------------------------------- --
--- -----------------------------
------ - ------------------------ -- ----------- - ---- -----------
------ - ------------------------ -- ----------- - ---- -----------
------ ------- -------使用函数式组件
你可以使用函数式组件来减少代码重复率，这对大型应用程序非常有用。
-- -------------------- ---- -------
------ - --------- - ---- ---------------
------ - ------------------------ - ---- ----------------------------------
------ - ------------------------- - ---- ------------------------
------ ----- ----------- - -- ----- -------- -- -- -
---------- ----------- -- --------- ------- ----------------- -----------------
--- -----
------------
--
----------------------- - --------------
------------------------------------- -- --
----- ---------------
----- -
----- -
------ -----------
----- ---- ---- -- ----- --- ------
--------- -----
--
--------- -
------ -----------
----- ---- -------- -- --- ------- ------
--------- -----
--
--
----- -- ------ ---- ---- -------
--- --------- ----- -- ------------ --------- ---
----使用 hooks
你可以使用 hooks 组件简化组件生命周期，并且在函数式组件中定义状态并更新它们。
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - --------- - ---- ---------------
------ -------- --------------- ------------ -- -
----- ------- --------- - -----------------------
------ -
---------- ----------- -- -------------- - --- ------------------------
------ ------- -- ------- -----
------------
--
-总结
@elastic/babel-preset-kibana 是一个非常好用的 npm 包，它让 Kibana 开发人员更容易地创建新的 UI 元素，使用类装饰器、函数式组件和 hooks ；同时还使得代码重用更容易。这篇文章提供了一个完整的使用指南，并且为你的项目提供了示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/100617