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
This commit is contained in:
Greg Ziółkowski 2023-09-26 06:49:55 +00:00
parent f7ffbb05e1
commit a3c6b4c634
3 changed files with 21 additions and 24 deletions

View File

@ -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,
} ),

View File

@ -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,

View File

@ -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,
};