feat: add option for building both a legacy and modern browser build

Author: bryceosterhaus

packages/liferay-npm-scripts/src/config/babel.json

@@ -4,7 +4,17 @@
 			"plugins": ["transform-react-remove-prop-types"]
 		}
 	},
-	"presets": ["@babel/preset-env", "@babel/preset-react"],
+	"presets": [
+		[
+			"@babel/preset-env",
+			{
+				"targets": {
+					"browsers": ["defaults"]
+				}
+			}
+		],
+		"@babel/preset-react"
+	],
 	"plugins": [
 		"@babel/proposal-class-properties",
 		"@babel/proposal-export-namespace-from",

packages/liferay-npm-scripts/src/presets/standard/index.js

@@ -40,6 +40,7 @@ module.exports = {
 		temp: 'build/npmscripts',
 	},
 	check: CHECK_AND_FIX_GLOBS,
+	dualBuild: false,
 	fix: CHECK_AND_FIX_GLOBS,
 	rules: {
 		'blacklisted-dependency-patterns': ['^liferay-npm-bundler-loader-.+'],

packages/liferay-npm-scripts/src/utils/mergeBabelLoaderOptions.js

@@ -6,6 +6,45 @@
 const getMergedConfig = require('./getMergedConfig');
 
 const BABEL_CONFIG = getMergedConfig('babel');
+const NPM_SCRIPTS_CONFIG = getMergedConfig('npmscripts');
+
+function updateWebpackRules(baseConfig, babelConfig) {
+	const clonedConfig = {...baseConfig};
+
+	clonedConfig.module = {
+		...clonedConfig.module,
+		rules: clonedConfig.module.rules.map((rule) => {
+			let {use} = rule;
+
+			if (!use) {
+				return rule;
+			}
+
+			if (!Array.isArray(use)) {
+				use = [use];
+			}
+
+			return {
+				...rule,
+				use: use.map((useEntry, i) => {
+					if (typeof useEntry === 'string') {
+						return {
+							loader: useEntry,
+							options: {...babelConfig},
+						};
+					} else {
+						return {
+							...useEntry,
+							options: {...babelConfig, ...useEntry.options},
+						};
+					}
+				}),
+			};
+		}),
+	};
+
+	return clonedConfig;
+}
 
 /**
  * Modify all babel-loader options so that they include our defaults.
@@ -22,28 +61,53 @@ function mergeBabelLoaderOptions(webpackConfig) {
 		return webpackConfig;
 	}
 
-	webpackConfig.module.rules.forEach((rule) => {
-		let {use} = rule;
-
-		if (!use) {
-			return;
-		}
-
-		if (!Array.isArray(use)) {
-			use = [use];
-		}
-
-		use.forEach((useEntry, i) => {
-			if (typeof useEntry === 'string') {
-				use[i] = {
-					loader: useEntry,
-					options: {...BABEL_CONFIG},
-				};
-			} else {
-				use[i].options = {...BABEL_CONFIG, ...useEntry.options};
-			}
-		});
-	});
+	if (NPM_SCRIPTS_CONFIG.dualBuild) {
+		const modernBabelConfig = {
+			...BABEL_CONFIG,
+			presets: BABEL_CONFIG.presets.map((preset) => {
+				if (
+					preset === '@babel/preset-env' ||
+					preset[0] === '@babel/preset-env'
+				) {
+					return [
+						'@babel/preset-env',
+						{
+							targets: {
+								browsers: [
+									'Edge >= 16',
+									'Firefox >= 60',
+									'Chrome >= 61',
+									'Safari >= 11',
+									'Opera >= 48',
+								],
+							},
+						},
+					];
+				}
+
+				return preset;
+			}),
+		};
+
+		const baseConfig = updateWebpackRules(webpackConfig, BABEL_CONFIG);
+		const modernConfig = updateWebpackRules(
+			webpackConfig,
+			modernBabelConfig
+		);
+
+		webpackConfig = [
+			baseConfig,
+			{
+				...modernConfig,
+				output: {
+					...modernConfig.output,
+					filename: `${modernConfig.output.filename}_modern`,
+				},
+			},
+		];
+	} else {
+		webpackConfig = updateWebpackRules(webpackConfig, BABEL_CONFIG);
+	}
 
 	return webpackConfig;
 }