kibana/packages/kbn-babel-preset
christineweng c04d1782b7
[Security Solution][Tech Debt] Move remaining chart related components to alert KPI folder (#223570)
## Summary

This PR moves the `chart_settings_popover` and `field_selections` to
`~security_solution/public/detections/components/alerts_kpis` since they
are used exclusively by the KPI charts. These were left out in the
original folder reorg effort in
https://github.com/elastic/kibana/pull/189234


### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
2025-06-24 16:17:21 -05:00
..
BUILD.bazel chore(NA): upgrade to webpack 5 (#191106) 2025-02-14 03:01:36 +00:00
common_babel_parser_options.js Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
common_preset.js Revert "Update dependency monaco-editor to ^0.52.2 (main) (#206176)" (#222854) 2025-06-06 12:36:00 +02:00
istanbul_preset.js Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
kibana.jsonc Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
node_preset.js Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
package.json Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
README.mdx Initialize ops documentation section (#132262) 2022-05-17 15:22:38 -05:00
styled_components_files.js [Security Solution][Tech Debt] Move remaining chart related components to alert KPI folder (#223570) 2025-06-24 16:17:21 -05:00
tsconfig.json Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
webpack_preset.js chore(NA): upgrade to webpack 5 (#191106) 2025-02-14 03:01:36 +00:00

---
id: kibDevDocsOpsBabelPreset
slug: /kibana-dev-docs/ops/babel-preset
title: "@kbn/babel-preset"
description: A package holding the main babel configs on Kibana
date: 2022-05-17
tags: ['kibana', 'dev', 'contributor', 'operations', 'babel', 'custom', 'preset']
---

This package contains the shared bits of babel config that we use for transpiling our source code to code compatible with Node.JS and the various [browsers we support](https://www.elastic.co/support/matrix#matrix_browsers).

## Usage

To use those presets add either `@kbn/babel-preset/node_preset` or `@kbn/babel-preset/webpack_preset` into the babel config file.

`@kbn/babel-preset/node_preset` is usually placed in a [`babel.config.js` file](https://babeljs.io/docs/en/configuration#babelconfigjs).

`@kbn/babel-preset/webpack_preset` is usually placed directly in a `webpack` configuration.

If you're transpiling code that will be run in both the browser and node you must transpile your code twice, once for each target. 

Along with the introduction of Bazel to build packages we also provide now an easier way to easily use the babel transpiler by using the `js_ts_tarnspiler` rule with our without the `web` property enabled. 
Take a look for example at `@kbn/i18n` to see how that can look.