Remove dev step from tooling builds (reducing memory pressure) and copy the minified file to a max.js file for backwards compat (#16760)

Originally our build commands for our tools were running both dev and
prod, outputted an unminified max.js file during CI. This impacted
memory usage during build and is not necessary for debugging since we
offer source maps.

This PR removes the dev step from our builds, so we won't be outputting
the unminified max.js files anymore. But in order to preserve backwards
compatibility for users who may have been referencing the .max.js file
directly, we now copy the minified file to a .max.js file after the
build is complete. This plugin will only run if the `minToMax` option is
set to true in the webpack configuration.

---------

Co-authored-by: Georgina <[email protected]>

Author: georginahalpern

packages/dev/buildTools/src/webpackTools.ts

@@ -4,8 +4,8 @@ import transformer from "./pathTransform.js";
 import type { BuildType, DevPackageName, UMDPackageName } from "./packageMapping.js";
 import { getPackageMappingByDevName, getPublicPackageName, isValidDevPackageName, umdPackageMapping } from "./packageMapping.js";
 import * as path from "path";
-import { camelize } from "./utils.js";
-import type { RuleSetRule, Configuration } from "webpack";
+import { camelize, copyFile } from "./utils.js";
+import type { RuleSetRule, Configuration, Compiler } from "webpack";
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const externalsFunction = (excludePackages: string[] = [], type: BuildType = "umd") => {
@@ -220,6 +220,33 @@ export const commonDevWebpackConfiguration = (
     };
 };
 
+/**
+ * Originally our build commands for our tools were running both dev and prod, outputted an unminified max.js file during CI. This impacted memory usage during
+ * build and is not necessary for debugging since we offer source maps. We have since removed the dev step from our builds, but in order to preserve
+ * backwards compatibility for users who may have been referencing the .max.js file directly, we now copy the minified file to a .max.js file
+ * after the build is complete. This plugin will only run if the `copyMinToMax` option is set to true in the webpack configuration.
+ */
+class CopyMinToMaxWebpackPlugin {
+    apply(compiler: Compiler) {
+        compiler.hooks.done.tap("CopyToMax", (stats) => {
+            const outputPath = stats.compilation.outputOptions.path;
+            const file = stats.compilation.outputOptions.filename?.toString();
+            if (outputPath && file) {
+                const from = path.join(outputPath, file);
+                let to;
+                if (file.includes(".min.js")) {
+                    // if maxMode is false, the minified file will have .min.js suffix and the max file will have no suffix
+                    to = path.join(outputPath, file.replace(/\.min\.js$/, ".js"));
+                } else {
+                    // if maxMode is true, the minified file will have no suffix and the max file will have max.js suffix
+                    to = path.join(outputPath, file.replace(/\.js$/, ".max.js"));
+                }
+                copyFile(from, to);
+            }
+        });
+    }
+}
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const commonUMDWebpackConfiguration = (options: {
     entryPoints?: { [name: string]: string };
@@ -235,6 +262,7 @@ export const commonUMDWebpackConfiguration = (options: {
     es6Mode?: boolean;
     maxMode?: boolean; // if true filename will have .max for the dev version and nothing for the prod version
     extraExternals?: Configuration["externals"]; // see https://webpack.js.org/configuration/externals/#combining-syntaxes
+    minToMax?: boolean; // if true, will copy the minified file to a file with max.js suffix. This is for back-compat reasons in case users reference .max.js output directly. For debugging purposes, we expose the sourcemap
 }) => {
     const packageMapping = getPackageMappingByDevName(options.devPackageName);
     const packageName = getPublicPackageName(options.es6Mode ? packageMapping.es6 : packageMapping.umd);
@@ -248,6 +276,7 @@ export const commonUMDWebpackConfiguration = (options: {
         entry: options.entryPoints ?? "./src/index.ts",
         devtool: options.mode === "production" ? "source-map" : "inline-cheap-module-source-map",
         mode: options.mode || "development",
+        plugins: options.minToMax && options.mode === "production" ? [new CopyMinToMaxWebpackPlugin()] : [],
         output: {
             path: options.outputPath || path.resolve("./dist"),
             filename: (typeof options.overrideFilename === "function" && options.overrideFilename) || filename,
@@ -277,7 +306,6 @@ export const commonUMDWebpackConfiguration = (options: {
                 tsOptions: {
                     getCustomTransformers: (_program: ts.Program) => {
                         // webpack program
-                        console.log("generating transformers...");
                         return {
                             after: [
                                 transformer(_program, {

packages/public/@babylonjs/gui-editor/package.json

@@ -11,7 +11,7 @@
         "license.md"
     ],
     "scripts": {
-        "build": "npm run clean && npm run build:dev && npm run build:prod && npm run build:declaration",
+        "build": "npm run clean && npm run build:prod && npm run build:declaration",
         "build:dev": "webpack --env development",
         "build:prod": "webpack --env production",
         "build:declaration": "build-tools -c pud --config ./config.json",

packages/public/@babylonjs/gui-editor/webpack.config.js

@@ -9,6 +9,7 @@ module.exports = (env) => {
         namespace: "GUIEDITOR",
         es6Mode: true,
         maxMode: true,
+        minToMax: true,
         alias: {
             "shared-ui-components": path.resolve("../../../dev/sharedUiComponents/dist"),
         },

packages/public/@babylonjs/inspector/package.json

@@ -11,7 +11,7 @@
         "license.md"
     ],
     "scripts": {
-        "build": "npm run clean && npm run build:dev && npm run build:prod && npm run build:declaration",
+        "build": "npm run clean && npm run build:prod && npm run build:declaration",
         "build:dev": "webpack --env development",
         "build:prod": "webpack --env production",
         "build:declaration": "build-tools -c pud --config ./config.json",

packages/public/@babylonjs/inspector/webpack.config.js

@@ -9,6 +9,7 @@ module.exports = (env) => {
         namespace: "INSPECTOR",
         es6Mode: true,
         maxMode: true,
+        minToMax: true,
         alias: {
             "shared-ui-components": path.resolve("../../../dev/sharedUiComponents/dist"),
         },

packages/public/@babylonjs/node-editor/package.json

@@ -1,17 +1,17 @@
 {
     "name": "@babylonjs/node-editor",
     "version": "8.13.0",
-    "main": "dist/babylon.nodeEditor.max.js",
-    "module": "dist/babylon.nodeEditor.max.js",
-    "esnext": "dist/babylon.nodeEditor.max.js",
+    "main": "dist/babylon.nodeEditor.js",
+    "module": "dist/babylon.nodeEditor.js",
+    "esnext": "dist/babylon.nodeEditor.js",
     "typings": "dist/babylon.nodeEditor.module.d.ts",
     "files": [
         "dist/**/*.*",
         "readme.md",
         "license.md"
     ],
     "scripts": {
-        "build": "npm run clean && npm run build:dev && npm run build:prod && npm run build:declaration",
+        "build": "npm run clean && npm run build:prod && npm run build:declaration",
         "build:dev": "webpack --env development",
         "build:prod": "webpack --env production",
         "build:declaration": "build-tools -c pud --config ./config.json",

packages/public/@babylonjs/node-editor/webpack.config.js

@@ -9,6 +9,7 @@ module.exports = (env) => {
         namespace: "NODEEDITOR",
         es6Mode: true,
         maxMode: true,
+        minToMax: true,
         alias: {
             "shared-ui-components": path.resolve("../../../dev/sharedUiComponents/dist"),
         },

packages/public/@babylonjs/node-geometry-editor/package.json

@@ -1,17 +1,17 @@
 {
     "name": "@babylonjs/node-geometry-editor",
     "version": "8.13.0",
-    "main": "dist/babylon.nodeGeometryEditor.max.js",
-    "module": "dist/babylon.nodeGeometryEditor.max.js",
-    "esnext": "dist/babylon.nodeGeometryEditor.max.js",
+    "main": "dist/babylon.nodeGeometryEditor.js",
+    "module": "dist/babylon.nodeGeometryEditor.js",
+    "esnext": "dist/babylon.nodeGeometryEditor.js",
     "typings": "dist/babylon.nodeGeometryEditor.module.d.ts",
     "files": [
         "dist/**/*.*",
         "readme.md",
         "license.md"
     ],
     "scripts": {
-        "build": "npm run clean && npm run build:dev && npm run build:prod && npm run build:declaration",
+        "build": "npm run clean && npm run build:prod && npm run build:declaration",
         "build:dev": "webpack --env development",
         "build:prod": "webpack --env production",
         "build:declaration": "build-tools -c pud --config ./config.json",

packages/public/@babylonjs/node-geometry-editor/webpack.config.js

@@ -9,6 +9,7 @@ module.exports = (env) => {
         namespace: "NODEGEOMETRYEDITOR",
         es6Mode: true,
         maxMode: true,
+        minToMax: true,
         alias: {
             "shared-ui-components": path.resolve("../../../dev/sharedUiComponents/dist"),
         },

packages/public/@babylonjs/node-particle-editor/package.json

@@ -1,17 +1,17 @@
 {
     "name": "@babylonjs/node-particle-editor",
     "version": "8.12.0",
-    "main": "dist/babylon.nodeParticleEditor.max.js",
-    "module": "dist/babylon.nodeParticleEditor.max.js",
-    "esnext": "dist/babylon.nodeParticleEditor.max.js",
+    "main": "dist/babylon.nodeParticleEditor.js",
+    "module": "dist/babylon.nodeParticleEditor.js",
+    "esnext": "dist/babylon.nodeParticleEditor.js",
     "typings": "dist/babylon.nodeParticleEditor.module.d.ts",
     "files": [
         "dist/**/*.*",
         "readme.md",
         "license.md"
     ],
     "scripts": {
-        "build": "npm run clean && npm run build:dev && npm run build:prod && npm run build:declaration",
+        "build": "npm run clean && npm run build:prod && npm run build:declaration",
         "build:dev": "webpack --env development",
         "build:prod": "webpack --env production",
         "build:declaration": "build-tools -c pud --config ./config.json",