Different presets for different stages

elastic · Apr 26, 2022 · 9c0b1cb · 9c0b1cb
1 parent 288e124
commit 9c0b1cb
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 14 deletions.
diff --git a/packages/kbn-babel-preset/BUILD.bazel b/packages/kbn-babel-preset/BUILD.bazel
@@ -10,6 +10,7 @@ SOURCE_FILES = glob([
   "istanbul_preset.js",
   "node_preset.js",
   "styled_components_files.js",
+  "web_preset.js",
   "webpack_preset.js",
 ])
 

diff --git a/packages/kbn-babel-preset/README.md b/packages/kbn-babel-preset/README.md
@@ -12,9 +12,11 @@ To use our presets add the following to the devDependencies section of your pack
 
 Then run `yarn kbn bootstrap` to properly link the package into your plugin/package.
 
-Finally, add either `@kbn/babel-preset/node_preset` or `@kbn/babel-preset/webpack_preset` to your babel config.
+Finally, add either `@kbn/babel-preset/node_preset`, `@kbn/babel-preset/web_preset` or `@kbn/babel-preset/webpack_preset` to your babel config.
 
-`@kbn/babel-preset/node_preset` is usually placed in a [`babel.config.js` file](https://babeljs.io/docs/en/configuration#babelconfigjs).
+`@kbn/babel-preset/node_preset` is usually placed in a [`babel.config.js` file](https://babeljs.io/docs/en/configuration#babelconfigjs) for server-side code.
+
+`@kbn/babel-preset/web_preset` is used to build browser-friendly packages that will be bundled later on by `webpack` using the `@kbn/babel-preset/webpack_preset`. Refer to [the original PR for the discussion and metrics improvements](https://github.com/elastic/kibana/pull/130904).
 
 `@kbn/babel-preset/webpack_preset` is usually placed directly in your `webpack` configuration.
 

diff --git a/packages/kbn-babel-preset/web_preset.js b/packages/kbn-babel-preset/web_preset.js
@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = (_, options = {}) => {
+  return {
+    // This preset is called from the /src/dev/bazel/jsts_transpiler.bzl.
+    // Ideally, it should simply use the `webpack_preset` with some opts but, since it is called via CLI options,
+    // Babel currently does not provide a way to pass options to the presets.
+    presets: [[require('./webpack_preset'), { ...options, esmodules: true }]],
+  };
+};
diff --git a/packages/kbn-babel-preset/webpack_preset.js b/packages/kbn-babel-preset/webpack_preset.js
@@ -8,21 +8,18 @@
 
 const { USES_STYLED_COMPONENTS } = require('./styled_components_files');
 
-module.exports = (_, options = {}) => {
+module.exports = (_, { esmodules, ...options } = {}) => {
   return {
     presets: [
       [
         require.resolve('@babel/preset-env'),
         {
-          ...(options.esmodules === false
-            ? {}
-            : {
-                targets: {
-                  esmodules: true,
-                },
-                modules: false,
-              }),
+          // When building the @kbn web packages, we want to emit the ES modules only.
+          // However, when generating the final bundles in webpack, we want `.browserslistrc` to be applied (specifying no targets gets this effect).
+          // This optimization has proven to generate a smaller bundle sizes overall. \o/
+          ...(esmodules === true ? { targets: { esmodules: true } } : {}),
           useBuiltIns: 'entry',
+          modules: false,
           // Please read the explanation for this
           // in node_preset.js
           corejs: '3.21.1',

diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts
@@ -219,8 +219,8 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
               babelrc: false,
               envName: worker.dist ? 'production' : 'development',
               presets: IS_CODE_COVERAGE
-                ? [ISTANBUL_PRESET_PATH, [BABEL_PRESET_PATH, { esmodules: false }]]
-                : [[BABEL_PRESET_PATH, { esmodules: false }]],
+                ? [ISTANBUL_PRESET_PATH, [BABEL_PRESET_PATH]]
+                : [[BABEL_PRESET_PATH]],
             },
           },
         },

diff --git a/src/dev/bazel/jsts_transpiler.bzl b/src/dev/bazel/jsts_transpiler.bzl
@@ -21,7 +21,7 @@ def jsts_transpiler(name, srcs, build_pkg_name, web = False, root_input_dir = "s
 
   if web:
     inline_presets += [
-      "@kbn/babel-preset/webpack_preset",
+      "@kbn/babel-preset/web_preset",
     ]
   else:
     inline_presets += [