build(frontend): use polyfill and babel esbuild plugins

esbuild.config.mjs

@@ -1,5 +1,6 @@
 import * as esbuild from 'esbuild';
 
+import babel from 'esbuild-plugin-babel';
 import { sassPlugin } from 'esbuild-sass-plugin';
 // import svgPlugin from 'esbuild-plugin-svg-bundle';
 import svgPlugin from 'esbuild-plugin-svg';
@@ -8,9 +9,11 @@ import { copy } from 'esbuild-plugin-copy';
 import manifestPlugin from 'esbuild-plugin-assets-manifest';
 import copyWithHashPlugin from '@enonic/esbuild-plugin-copy-with-hash';
 import inlineImportPlugin from 'esbuild-plugin-inline-import';
+import { nodeModulesPolyfillPlugin } from 'esbuild-plugins-node-modules-polyfill';
 
 const staticDir = './static';
 const wellKnownDir = './well-known';
+const wellKnownDirs = [ `${wellKnownDir}/de-de-formal`, `${wellKnownDir}/en-eu` ];
 
 await esbuild.build({
   bundle: true,
@@ -22,6 +25,9 @@ await esbuild.build({
   },
   outdir: staticDir,
   plugins: [
+    nodeModulesPolyfillPlugin({
+      // modules: ['crypto','worker_threads']
+    }),
     sassPlugin(),
     svgPlugin({
       minify: true,
@@ -32,14 +38,14 @@ await esbuild.build({
       resolveFrom: 'cwd',
       assets: {
         from: [ './assets/favicons/*' ],
-        to: [ `${wellKnownDir}/de-de-formal`, `${wellKnownDir}/en-eu` ],
+        to: wellKnownDirs,
       },
     }),
     copy({
       resolveFrom: 'cwd',
       assets: {
         from: [ './config/robots.txt' ],
-        to: [ `${wellKnownDir}/de-de-formal`, `${wellKnownDir}/en-eu` ],
+        to: wellKnownDirs,
       },
     }),
     // ...['de-de-formal','en-eu'].map((lang) => manifestPlugin({
@@ -61,5 +67,23 @@ await esbuild.build({
         './config/robots.txt',
       ],
     }), */
+    babel({
+      config: {
+        "sourceMaps": "inline",
+        "presets": [
+          "@babel/preset-env",
+        ],
+        "plugins": [
+          ["@babel/plugin-proposal-decorators", { "legacy": true }],
+          ["@babel/plugin-syntax-dynamic-import"],
+          ["@babel/plugin-transform-class-properties", { "loose": true }],
+          ["@babel/plugin-transform-private-methods", { "loose": true }],
+          ["@babel/plugin-transform-private-property-in-object", { "loose": true }],
+          ["@babel/plugin-transform-modules-commonjs"],
+          ["@babel/transform-runtime"],
+          ["@babel/plugin-syntax-jsx"],
+        ],
+      },
+    }),
   ],
 });