Build: Introduce SCRIPT_DEBUG global in webpack processing

Backports the same changes to the webpack config in the Gutenberg plugin with WordPress/gutenberg#50122. The `warning` function from `@wordpress/warning` no longer worked correctly with webpack 5. In practice, it no longer called `console.warn`. To fix it, the usage of `process.env.NODE_ENV` check got replaced with another optional global: `SCRIPT_DEBUG`. All the tools used in the Gutenberg, get updated to work with this new constant, including `@wordpress/scripts`. This way, developers are able to guard code that should be run only in development mode. In WordPress core, the same constant needs to be added mostly to ensure that the code behind the check gets completely removed in production mode. Fixes #59407. git-svn-id: https://develop.svn.wordpress.org/trunk@56699 602fd350-edb4-49c9-b593-d223f7449a82
mikachan · Sep 26, 2023 · 1ba9ebb · 1ba9ebb
1 parent 42eb473
commit 1ba9ebb
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 24 deletions.
diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-const { DefinePlugin } = require( 'webpack' );
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
 
 /**
@@ -12,7 +11,7 @@ const DependencyExtractionPlugin = require( '@wordpress/dependency-extraction-we
 /**
  * Internal dependencies
  */
-const { normalizeJoin, stylesTransform, baseConfig, baseDir } = require( './shared' );
+const { baseDir, getBaseConfig, normalizeJoin, stylesTransform } = require( './shared' );
 const {
 	isDynamic,
 	toDirectoryName,
@@ -62,8 +61,9 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 		noErrorOnMissing: true,
 	} ) );
 
+	const baseConfig = getBaseConfig( env );
 	const config = {
-		...baseConfig( env ),
+		...baseConfig,
 		entry: {
 			'navigation/view': normalizeJoin( baseDir, 'node_modules/@wordpress/block-library/build-module/navigation/view' ),
 			'image/view': normalizeJoin( baseDir, 'node_modules/@wordpress/block-library/build-module/image/view' ),
@@ -127,13 +127,7 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 			],
 		},
 		plugins: [
-			new DefinePlugin( {
-				// Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging.
-				'process.env.IS_GUTENBERG_PLUGIN': false,
-				'process.env.FORCE_REDUCED_MOTION': JSON.stringify(
-					process.env.FORCE_REDUCED_MOTION,
-				),
-			} ),
+			...baseConfig.plugins,
 			new DependencyExtractionPlugin( {
 				injectPolyfill: false,
 				useDefaults: false,

diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-const { DefinePlugin } = require( 'webpack' );
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
 const LiveReloadPlugin = require( 'webpack-livereload-plugin' );
 const UglifyJS = require( 'uglify-js' );
@@ -17,7 +16,7 @@ const DependencyExtractionPlugin = require( '@wordpress/dependency-extraction-we
 /**
  * Internal dependencies
  */
-const { normalizeJoin, stylesTransform, baseConfig, baseDir } = require( './shared' );
+const { baseDir, getBaseConfig, normalizeJoin, stylesTransform } = require( './shared' );
 const { dependencies } = require( '../../package' );
 
 const exportDefaultPackages = [
@@ -129,8 +128,9 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 		to: normalizeJoin(baseDir, `src/${ phpFiles[ filename ] }` ),
 	} ) );
 
+	const baseConfig = getBaseConfig( env );
 	const config = {
-		...baseConfig( env ),
+		...baseConfig,
 		entry: packages.reduce( ( memo, packageName ) => {
 			memo[ packageName ] = {
 				import: normalizeJoin(baseDir, `node_modules/@wordpress/${ packageName }` ),
@@ -151,15 +151,7 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 			path: normalizeJoin(baseDir, `${ buildTarget }/js/dist` ),
 		},
 		plugins: [
-			new DefinePlugin( {
-				// Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging.
-				'process.env.IS_GUTENBERG_PLUGIN': false,
-				// Inject the `IS_WORDPRESS_CORE` global, used for feature flagging.
-				'process.env.IS_WORDPRESS_CORE': true,
-				'process.env.FORCE_REDUCED_MOTION': JSON.stringify(
-					process.env.FORCE_REDUCED_MOTION
-				),
-			} ),
+			...baseConfig.plugins,
 			new DependencyExtractionPlugin( {
 				injectPolyfill: true,
 				combineAssets: true,

diff --git a/tools/webpack/shared.js b/tools/webpack/shared.js
@@ -1,13 +1,14 @@
 /**
  * External dependencies
  */
+const { DefinePlugin } = require( 'webpack' );
 const TerserPlugin = require( 'terser-webpack-plugin' );
 const postcss = require( 'postcss' );
 const { join } = require( 'path' );
 
 const baseDir = join( __dirname, '../../' );
 
-const baseConfig = ( env ) => {
+const getBaseConfig = ( env ) => {
 	const mode = env.environment;
 
 	const config = {
@@ -41,6 +42,16 @@ const baseConfig = ( env ) => {
 		},
 		stats: 'errors-only',
 		watch: env.watch,
+		plugins: [
+			new DefinePlugin( {
+				// Inject the `IS_GUTENBERG_PLUGIN` global, used for feature flagging.
+				'process.env.IS_GUTENBERG_PLUGIN': false,
+				// Inject the `IS_WORDPRESS_CORE` global, used for feature flagging.
+				'process.env.IS_WORDPRESS_CORE': true,
+				// Inject the `SCRIPT_DEBUG` global, used for dev versions of JavaScript.
+				SCRIPT_DEBUG: mode === 'development',
+			} ),
+		],
 	};
 
 	if ( mode === 'development' && env.buildTarget === 'build/' ) {
@@ -79,7 +90,7 @@ const normalizeJoin = ( ...paths ) => join( ...paths ).replace( /\\/g, '/' );
 
 module.exports = {
 	baseDir,
-	baseConfig,
+	getBaseConfig,
 	normalizeJoin,
 	stylesTransform,
 };