Use esbuild to transpile frontend assets. (#13886)

* Using `esbuild`/`esbuild-loader` for transpilation.

* Turning function into actual class.

* Simplifying config.

* Adjusting target.

graylog2-web-interface/package.json

@@ -144,6 +144,7 @@
     "css-loader": "^6.5.1",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
+    "esbuild-loader": "^2.20.0",
     "eslint-config-graylog": "file:packages/eslint-config-graylog",
     "estraverse-fb": "^1.3.1",
     "express": "^4.16.4",

graylog2-web-interface/packages/graylog-web-plugin/src/PluginManifest.js

@@ -14,11 +14,20 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-const create = (metadata, exports) => {
-  return {
-    metadata: metadata,
-    exports: exports,
-  };
-};
 
-module.exports = create;
+class PluginManifest {
+  constructor(metadata, exports) {
+    this._metadata = metadata;
+    this._exports = exports;
+  }
+
+  get metadata() {
+    return this._metadata;
+  }
+
+  get exports() {
+    return this._exports;
+  }
+}
+
+module.exports = PluginManifest;

graylog2-web-interface/webpack.config.js

@@ -21,7 +21,7 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const merge = require('webpack-merge');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
+const { ESBuildMinifyPlugin } = require('esbuild-loader');
 
 const UniqueChunkIdPlugin = require('./webpack/UniqueChunkIdPlugin');
 
@@ -91,26 +91,13 @@ const webpackConfig = {
       {
         test: /\.[jt]s(x)?$/,
         use: {
-          loader: 'babel-loader',
+          loader: 'esbuild-loader',
           options: {
-            cacheDirectory: 'target/web/cache',
-            // eslint-disable-next-line global-require
-            presets: [require('babel-preset-graylog')],
+            loader: 'tsx',
+            target: 'chrome105,edge105,firefox91,safari15'.split(','),
           },
         },
-        include: /node_modules\/graylog-web-plugin/,
-      },
-      {
-        test: /\.[jt]s(x)?$/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            cacheDirectory: 'target/web/cache',
-            // eslint-disable-next-line global-require
-            presets: [require('babel-preset-graylog')],
-          },
-        },
-        exclude: /node_modules|\.node_cache/,
+        exclude: /node_modules\/(?!graylog-web-plugin)|\.node_cache/,
       },
       {
         test: /\.(svg)(\?.+)?$/,
@@ -261,15 +248,8 @@ if (TARGET.startsWith('build')) {
     mode: 'production',
     optimization: {
       moduleIds: 'deterministic',
-      minimizer: [new TerserPlugin({
-        terserOptions: {
-          compress: {
-            warnings: false,
-          },
-          mangle: {
-            reserved: ['$super', '$', 'exports', 'require'],
-          },
-        },
+      minimizer: [new ESBuildMinifyPlugin({
+        target: 'es2015',
       })],
     },
     plugins: [