From a3c6b4c634ed857ce30898b4804fcabf3df55ac1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=83=C2=B3=C3=85=E2=80=9Akowski?= Date: Tue, 26 Sep 2023 06:49:55 +0000 Subject: [PATCH] Build: Introduce SCRIPT_DEBUG global in webpack processing Backports the same changes to the webpack config in the Gutenberg plugin with https://github.com/WordPress/gutenberg/pull/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 --- tools/webpack/blocks.js | 14 ++++---------- tools/webpack/packages.js | 16 ++++------------ tools/webpack/shared.js | 15 +++++++++++++-- 3 files changed, 21 insertions(+), 24 deletions(-) diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js index df2a78abe8..cca6de47fd 100644 --- 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: { 'file/view': normalizeJoin(baseDir, `node_modules/@wordpress/block-library/build-module/file/view` ), 'navigation/view': normalizeJoin(baseDir, `node_modules/@wordpress/block-library/build-module/navigation/view` ), @@ -76,13 +76,7 @@ module.exports = function( env = { environment: 'production', watch: false, buil path: normalizeJoin(baseDir, `${ buildTarget }/blocks` ), }, 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, } ), diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js index 90c4f8deff..1bb97a43b9 100644 --- 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 index f6930d5e6e..5aea4204d3 100644 --- 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, };