Build Config: Add ES5 flag support (prebid#13436)

* Enhance Babel configuration to support ES5 output

- Added support for an ES5 mode in babelConfig.js, allowing for transpilation to ES5 syntax when the `--ES5` flag is used.
- Updated gulpfile.js and webpack.conf.js to pass the ES5 flag and adjust module handling accordingly.
- Enhanced README.md to document the new ES5 output feature and its usage.

This change improves compatibility with older browsers and environments requiring ES5 syntax.

* Update Babel configuration to conditionally use 'usage' for built-ins in ES5 mode

---------

Co-authored-by: Abdullah Cicekli <abdullah.cicekli@sahibinden.com>

Author: abdullahcicekli

README.md

@@ -256,6 +256,21 @@ gulp build-bundle-dev --modules=bidderA,module1,...
 
 The results will be in build/dev/prebid.js.
 
+## ES5 Output Support
+
+For compatibility with older parsers or environments that require ES5 syntax, you can generate ES5-compatible output using the `--ES5` flag:
+
+```bash
+gulp build-bundle-dev --modules=bidderA,module1,... --ES5
+```
+
+This will:
+- Transpile all code to ES5 syntax using CommonJS modules
+- Target browsers: IE11+, Chrome 50+, Firefox 50+, Safari 10+
+- Ensure compatibility with older JavaScript parsers
+
+**Note:** Without the `--ES5` flag, the build will use modern ES6+ syntax by default for better performance and smaller bundle sizes.
+
 ## Test locally
 
 To lint the code:

babelConfig.js

@@ -1,5 +1,6 @@
 
 let path = require('path');
+var argv = require('yargs').argv;
 
 function useLocal(module) {
   return require.resolve(module, {
@@ -10,15 +11,23 @@ function useLocal(module) {
 }
 
 module.exports = function (options = {}) {
+
+  const isES5Mode = argv.ES5 || options.ES5;
+
   return {
     'presets': [
       [
         useLocal('@babel/preset-env'),
         {
-          'useBuiltIns': 'entry',
+          'useBuiltIns': isES5Mode ? 'usage' : 'entry',
           'corejs': '3.42.0',
-          // a lot of tests use sinon.stub & others that stopped working on ES6 modules with webpack 5
-          'modules': options.test ? 'commonjs' : 'auto',
+          // Use ES5 mode if requested, otherwise use original logic
+          'modules': isES5Mode ? 'commonjs' : (options.test ? 'commonjs' : 'auto'),
+          ...(isES5Mode && {
+            'targets': {
+              'browsers': ['ie >= 11', 'chrome >= 50', 'firefox >= 50', 'safari >= 10']
+            }
+          })
         }
       ]
     ],

gulpfile.js

@@ -165,8 +165,12 @@ function makeDevpackPkg(config = webpackConfig) {
       mode: 'development'
     })
 
-    const babelConfig = require('./babelConfig.js')({disableFeatures: helpers.getDisabledFeatures(), prebidDistUrlBase: argv.distUrlBase || '/build/dev/'});
-
+    const babelConfig = require('./babelConfig.js')({
+      disableFeatures: helpers.getDisabledFeatures(), 
+      prebidDistUrlBase: argv.distUrlBase || '/build/dev/',
+      ES5: argv.ES5 // Pass ES5 flag to babel config
+    });
+    
     // update babel config to set local dist url
     cloned.module.rules
       .flatMap((rule) => rule.use)

webpack.conf.js

@@ -10,6 +10,9 @@ const fs = require('fs');
 const babelConfig = require('./babelConfig.js')({disableFeatures: helpers.getDisabledFeatures(), prebidDistUrlBase: argv.distUrlBase});
 const {WebpackManifestPlugin} = require('webpack-manifest-plugin')
 
+// Check if ES5 mode is requested
+const isES5Mode = argv.ES5;
+
 var plugins = [
   new webpack.EnvironmentPlugin({'LiveConnectMode': null}),
   new WebpackManifestPlugin({
@@ -41,6 +44,7 @@ if (argv.analyze) {
 module.exports = {
   mode: 'production',
   devtool: 'source-map',
+  target: isES5Mode ? ['web', 'es5'] : 'web',
   cache: {
     type: 'filesystem',
     cacheDirectory: path.resolve(__dirname, '.cache/webpack')
@@ -79,7 +83,7 @@ module.exports = {
     rules: [
       {
         test: /\.js$/,
-        exclude: path.resolve('./node_modules'), // required to prevent loader from choking non-Prebid.js node_modules
+        exclude: isES5Mode ? [] : path.resolve('./node_modules'), // In ES5 mode, process all files
         use: [
           {
             loader: 'babel-loader',
@@ -91,16 +95,16 @@ module.exports = {
           }
         ]
       },
-      { // This makes sure babel-loader is ran on our intended Prebid.js modules that happen to be in node_modules
-        test: /\.js$/,
+      // Only apply the second rule if not in ES5 mode
+      ...(isES5Mode ? [] : [{
         include: helpers.getArgModules().map(module => new RegExp('node_modules/' + module + '/')),
         use: [
           {
             loader: 'babel-loader',
             options: Object.assign({cacheDirectory: cacheDir, cacheCompression: false}, babelConfig)
           }
         ],
-      }
+      }])
     ]
   },
   optimization: {
@@ -110,8 +114,16 @@ module.exports = {
       new TerserPlugin({
         extractComments: false, // do not generate unhelpful LICENSE comment
         terserOptions: {
-          module: true, // do not prepend every module with 'use strict'; allow mangling of top-level locals
-        }
+          module: isES5Mode ? false : true, // Force ES5 output if ES5 mode is enabled
+          ...(isES5Mode && {
+            ecma: 5, // Target ES5
+            compress: {
+              ecma: 5 // Ensure compression targets ES5
+            },
+            mangle: {
+              safari10: true // Ensure compatibility with older browsers
+            }
+          })        }
       })
     ],
     splitChunks: {