FIX(EMULSIF-57): Preserve variables in JS minification

config/babel.config.js

@@ -1,7 +1,17 @@
 export default (api) => {
   api.cache(true);
 
-  const presets = [['minify', { builtIns: false }]];
+  const presets = [
+    [
+      'minify',
+      {
+        builtIns: false,
+        mangle: {
+          reserved: ['Drupal', 'drupalSettings', 'once'],
+        },
+      },
+    ],
+  ];
   const comments = false;
 
   return { presets, comments };

config/webpack/optimizers.js

@@ -1,4 +1,5 @@
 import ImageMinimizerPlugin from 'image-minimizer-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
 
 const ImageMinimizer = new ImageMinimizerPlugin({
   minimizer: {
@@ -12,6 +13,14 @@ const ImageMinimizer = new ImageMinimizerPlugin({
   },
 });
 
+const TerserMinimizer = new TerserPlugin({
+  terserOptions: {
+    mangle: {
+      reserved: ['Drupal', 'drupalSettings', 'once'],
+    },
+  },
+});
+
 export default {
-  minimizer: [ImageMinimizer],
+  minimizer: [ImageMinimizer, TerserMinimizer],
 };

config/webpack/webpack.common.js

@@ -230,6 +230,10 @@ const buildEntries = () => {
 export default {
   target: 'web',
   stats: { errorDetails: true },
+  externals: {
+    drupal: 'Drupal',
+    drupalSettings: 'drupalSettings',
+  },
   entry: buildEntries(),
   module: {
     rules: [

package.json

@@ -117,6 +117,7 @@
     "stylelint-selector-bem-pattern": "^4.0.1",
     "stylelint-webpack-plugin": "^5.0.1",
     "svg-spritemap-webpack-plugin": "^5.0.1",
+    "terser-webpack-plugin": "^5.3.9",
     "token-transformer": "^0.0.33",
     "twig-drupal-filters": "^3.2.0",
     "twig-testing-library": "^1.2.0",