Packages: Make Babel config less fragile

bin/packages/build.js

@@ -19,6 +19,7 @@ const mkdirp = require( 'mkdirp' );
  * Internal dependencies
  */
 const getPackages = require( './get-packages' );
+const getBabelConfig = require( './get-babel-config' );
 
 /**
  * Module Constants
@@ -31,29 +32,6 @@ const BUILD_DIR = {
 };
 const DONE = chalk.reset.inverse.bold.green( ' DONE ' );
 
-/**
- * Babel Configuration
- */
-const babelDefaultConfig = require( '@wordpress/babel-preset-default' );
-babelDefaultConfig.babelrc = false;
-// TODO: It should become the default value when all modules are moved to packages.
-babelDefaultConfig.plugins[ 1 ][ 1 ].pragma = 'createElement';
-const presetEnvConfig = babelDefaultConfig.presets[ 0 ][ 1 ];
-const babelConfigs = {
-	main: Object.assign(
-		{},
-		babelDefaultConfig,
-		{ presets: [
-			[ 'env', Object.assign(
-				{},
-				presetEnvConfig,
-				{ modules: 'commonjs' },
-			) ],
-		] }
-	),
-	module: babelDefaultConfig,
-};
-
 /**
  * Get the package name for a specified file
  *
@@ -100,7 +78,7 @@ function buildFile( file, silent ) {
 function buildFileFor( file, silent, environment ) {
 	const buildDir = BUILD_DIR[ environment ];
 	const destPath = getBuildPath( file, buildDir );
-	const babelOptions = babelConfigs[ environment ];
+	const babelOptions = getBabelConfig( environment );
 
 	mkdirp.sync( path.dirname( destPath ) );
 	const transformed = babel.transformFileSync( file, babelOptions ).code;

bin/packages/get-babel-config.js

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+const { isArray, map } = require( 'lodash' );
+const babelPluginTransformReactJSX = require( 'babel-plugin-transform-react-jsx' );
+const babelPresetEnv = require( 'babel-preset-env' );
+
+/**
+ * WordPress dependencies
+ */
+const babelDefaultConfig = require( '@wordpress/babel-preset-default' );
+
+const plugins = map( babelDefaultConfig.plugins, ( plugin ) => {
+	if ( isArray( plugin ) && plugin[ 0 ] === babelPluginTransformReactJSX ) {
+		return [ babelPluginTransformReactJSX, { pragma: 'createElement' } ];
+	}
+
+	return plugin;
+} );
+
+const babelConfigs = {
+	main: {
+		...babelDefaultConfig,
+		babelrc: false,
+		plugins,
+		presets: map( babelDefaultConfig.presets, ( preset ) => {
+			if ( isArray( preset ) && preset[ 0 ] === babelPresetEnv ) {
+				return [ babelPresetEnv, Object.assign(
+					{},
+					preset[ 1 ],
+					{ modules: 'commonjs' }
+				) ];
+			}
+			return preset;
+		} ),
+	},
+	module: {
+		...babelDefaultConfig,
+		babelrc: false,
+		plugins,
+	},
+};
+
+function getBabelConfig( environment ) {
+	return babelConfigs[ environment ];
+}
+
+module.exports = getBabelConfig;