diff --git a/bin/packages/build.js b/bin/packages/build.js index 89a246b7ace8c..ec57bedb32aa5 100755 --- a/bin/packages/build.js +++ b/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; diff --git a/bin/packages/get-babel-config.js b/bin/packages/get-babel-config.js new file mode 100644 index 0000000000000..89bad4c7c7c23 --- /dev/null +++ b/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;