Build Tools: Integrate DependencyExtractionWebpackPlugin in the JS build.

This patch integrates DependencyExtractionWebpackPlugin which was battle-tested in Gutenberg. 

This will greatly simplify the process of upgrading npm packages which change after every Gutenberg release. It might even useful during the WordPress release cycle as we might need to publish more often as we discover critical bugs and regressions.

Props jonsurrell, adamsilverstein, youknowriad, ocean90, netweb.

Fixes #48154. 



git-svn-id: https://develop.svn.wordpress.org/trunk@47035 602fd350-edb4-49c9-b593-d223f7449a82

.gitignore

@@ -24,6 +24,7 @@ wp-tests-config.php
 /src/wp-admin/css/*-rtl.css
 /src/wp-admin/css/colors/*/*.css
 /src/wp-admin/js
+/src/wp-includes/assets
 /src/wp-includes/js
 /src/wp-includes/css/dist
 /src/wp-includes/css/*.min.css

Gruntfile.js

@@ -108,8 +108,12 @@ module.exports = function(grunt) {
 			],
 			js: [
 				WORKING_DIR + 'wp-admin/js/',
+				WORKING_DIR + 'wp-includes/assets/',
 				WORKING_DIR + 'wp-includes/js/'
 			],
+			'webpack-assets': [
+				WORKING_DIR + 'wp-includes/js/**/*.asset.php'
+			],
 			dynamic: {
 				dot: true,
 				expand: true,
@@ -137,6 +141,7 @@ module.exports = function(grunt) {
 						expand: true,
 						cwd: SOURCE_DIR,
 						src: buildFiles.concat( [
+							'!assets/**', // Assets is extracted into separate copy tasks.
 							'!js/**', // JavaScript is extracted into separate copy tasks.
 							'!.{svn,git}', // Exclude version control folders.
 							'!wp-includes/version.php', // Exclude version.php
@@ -345,6 +350,12 @@ module.exports = function(grunt) {
 					}
 				]
 			},
+			'webpack-assets': {
+				expand: true,
+				cwd: WORKING_DIR + 'wp-includes/js/',
+				src: 'dist/*.asset.php',
+				dest: WORKING_DIR + 'wp-includes/assets/'
+			},
 			version: {
 				options: {
 					processContent: function( src ) {
@@ -1350,10 +1361,16 @@ module.exports = function(grunt) {
 		'uglify:jqueryform'
 	] );
 
-	grunt.registerTask( 'build:js', [
+	grunt.registerTask( 'build:webpack', [
-		'clean:js',
 		'webpack:prod',
 		'webpack:dev',
+		'copy:webpack-assets',
+		'clean:webpack-assets',
+	] );
+
+	grunt.registerTask( 'build:js', [
+		'clean:js',
+		'build:webpack',
 		'copy:js',
 		'file_append',
 		'uglify:all',

package.json

@@ -26,9 +26,10 @@
 	],
 	"devDependencies": {
 		"@wordpress/custom-templated-path-webpack-plugin": "1.5.0",
-		"@wordpress/e2e-test-utils": "2.4.3",
+		"@wordpress/dependency-extraction-webpack-plugin": "2.1.0",
-		"@wordpress/library-export-default-webpack-plugin": "1.4.1",
+		"@wordpress/e2e-test-utils": "3.0.0",
-		"@wordpress/scripts": "5.1.0",
+		"@wordpress/library-export-default-webpack-plugin": "1.5.0",
+		"@wordpress/scripts": "6.0.0",
 		"autoprefixer": "9.6.2",
 		"check-node-version": "4.0.1",
 		"copy-webpack-plugin": "^5.0.4",
@@ -76,6 +77,7 @@
 		"@wordpress/api-fetch": "3.6.4",
 		"@wordpress/autop": "2.5.1",
 		"@wordpress/blob": "2.5.1",
+		"@wordpress/block-directory": "1.0.5",
 		"@wordpress/block-editor": "3.2.5",
 		"@wordpress/block-library": "2.9.6",
 		"@wordpress/block-serialization-default-parser": "3.4.1",

phpcs.xml.dist

@@ -127,6 +127,7 @@
 	<exclude-pattern>/src/wp-includes/pluggable-deprecated\.php</exclude-pattern>
 	<exclude-pattern>/src/wp-includes/rss\.php</exclude-pattern>
 
+	<exclude-pattern>/src/wp-includes/assets/*</exclude-pattern>
 	<exclude-pattern>/src/wp-includes/blocks/*</exclude-pattern>
 	<exclude-pattern>/src/wp-includes/ID3/*</exclude-pattern>
 	<exclude-pattern>/src/wp-includes/IXR/*</exclude-pattern>

src/wp-includes/script-loader.php

@@ -223,395 +223,56 @@ function wp_get_script_polyfill( &$scripts, $tests ) {
 function wp_default_packages_scripts( &$scripts ) {
 	$suffix = wp_scripts_get_suffix();
 
-	$packages_versions = array(
+	$packages = array(
-		'a11y'                               => '2.5.1',
+		'a11y',
-		'annotations'                        => '1.7.2',
+		'annotations',
-		'api-fetch'                          => '3.6.4',
+		'api-fetch',
-		'autop'                              => '2.5.1',
+		'autop',
-		'blob'                               => '2.5.1',
+		'blob',
-		'block-editor'                       => '3.2.5',
+		'block-directory',
-		'block-library'                      => '2.9.6',
+		'block-editor',
-		'block-serialization-default-parser' => '3.4.1',
+		'block-library',
-		'blocks'                             => '6.7.2',
+		'block-serialization-default-parser',
-		'components'                         => '8.3.2',
+		'blocks',
-		'compose'                            => '3.7.2',
+		'components',
-		'core-data'                          => '2.7.5',
+		'compose',
-		'data-controls'                      => '1.3.4',
+		'core-data',
-		'data'                               => '4.9.2',
+		'data',
-		'date'                               => '3.5.0',
+		'data-controls',
-		'deprecated'                         => '2.6.1',
+		'date',
-		'dom-ready'                          => '2.5.1',
+		'deprecated',
-		'dom'                                => '2.5.2',
+		'dom',
-		'edit-post'                          => '3.8.6',
+		'dom-ready',
-		'editor'                             => '9.7.6',
+		'edit-post',
-		'element'                            => '2.8.2',
+		'editor',
-		'escape-html'                        => '1.5.1',
+		'element',
-		'format-library'                     => '1.9.5',
+		'escape-html',
-		'hooks'                              => '2.6.0',
+		'format-library',
-		'html-entities'                      => '2.5.0',
+		'hooks',
-		'i18n'                               => '3.6.1',
+		'html-entities',
-		'is-shallow-equal'                   => '1.6.1',
+		'i18n',
-		'keycodes'                           => '2.6.2',
+		'is-shallow-equal',
-		'list-reusable-blocks'               => '1.8.4',
+		'keycodes',
-		'media-utils'                        => '1.2.4',
+		'list-reusable-blocks',
-		'notices'                            => '1.8.2',
+		'media-utils',
-		'nux'                                => '3.7.2',
+		'notices',
-		'plugins'                            => '2.7.2',
+		'nux',
-		'priority-queue'                     => '1.3.1',
+		'plugins',
-		'redux-routine'                      => '3.6.2',
+		'priority-queue',
-		'rich-text'                          => '3.7.2',
+		'redux-routine',
-		'shortcode'                          => '2.4.1',
+		'rich-text',
-		'server-side-render'                 => '1.3.4',
+		'shortcode',
-		'token-list'                         => '1.6.1',
+		'server-side-render',
-		'url'                                => '2.8.2',
+		'token-list',
-		'viewport'                           => '2.8.2',
+		'url',
-		'wordcount'                          => '2.6.2',
+		'viewport',
-	);
+		'wordcount',
-
-	$packages_dependencies = array(
-		'a11y'                               => array(
-			'wp-dom-ready',
-			'wp-polyfill',
-		),
-		'annotations'                        => array(
-			'lodash',
-			'wp-data',
-			'wp-hooks',
-			'wp-i18n',
-			'wp-polyfill',
-			'wp-rich-text',
-		),
-		'api-fetch'                          => array(
-			'wp-i18n',
-			'wp-polyfill',
-			'wp-url',
-		),
-		'autop'                              => array(
-			'wp-polyfill',
-		),
-		'blob'                               => array(
-			'wp-polyfill',
-		),
-		'block-editor'                       => array(
-			'lodash',
-			'wp-a11y',
-			'wp-blob',
-			'wp-blocks',
-			'wp-components',
-			'wp-compose',
-			'wp-data',
-			'wp-deprecated',
-			'wp-dom',
-			'wp-element',
-			'wp-hooks',
-			'wp-html-entities',
-			'wp-i18n',
-			'wp-is-shallow-equal',
-			'wp-keycodes',
-			'wp-polyfill',
-			'wp-rich-text',
-			'wp-token-list',
-			'wp-url',
-			'wp-viewport',
-			'wp-wordcount',
-		),
-		'block-library'                      => array(
-			'editor',
-			'lodash',
-			'moment',
-			'wp-a11y',
-			'wp-api-fetch',
-			'wp-autop',
-			'wp-blob',
-			'wp-block-editor',
-			'wp-blocks',
-			'wp-components',
-			'wp-compose',
-			'wp-core-data',
-			'wp-data',
-			'wp-date',
-			'wp-deprecated',
-			'wp-editor',
-			'wp-element',
-			'wp-i18n',
-			'wp-is-shallow-equal',
-			'wp-keycodes',
-			'wp-polyfill',
-			'wp-rich-text',
-			'wp-server-side-render',
-			'wp-url',
-			'wp-viewport',
-		),
-		'block-serialization-default-parser' => array(
-			'wp-polyfill',
-		),
-		'blocks'                             => array(
-			'lodash',
-			'wp-autop',
-			'wp-blob',
-			'wp-block-serialization-default-parser',
-			'wp-compose',
-			'wp-data',
-			'wp-dom',
-			'wp-element',
-			'wp-hooks',
-			'wp-html-entities',
-			'wp-i18n',
-			'wp-is-shallow-equal',
-			'wp-polyfill',
-			'wp-shortcode',
-		),
-		'components'                         => array(
-			'lodash',
-			'moment',
-			'wp-a11y',
-			'wp-compose',
-			'wp-deprecated',
-			'wp-dom',
-			'wp-element',
-			'wp-hooks',
-			'wp-i18n',
-			'wp-is-shallow-equal',
-			'wp-keycodes',
-			'wp-polyfill',
-			'wp-rich-text',
-		),
-		'compose'                            => array(
-			'lodash',
-			'wp-element',
-			'wp-is-shallow-equal',
-			'wp-polyfill',
-		),
-		'core-data'                          => array(
-			'lodash',
-			'wp-api-fetch',
-			'wp-data',
-			'wp-deprecated',
-			'wp-is-shallow-equal',
-			'wp-polyfill',
-			'wp-url',
-		),
-		'data'                               => array(
-			'lodash',
-			'wp-compose',
-			'wp-deprecated',
-			'wp-element',
-			'wp-is-shallow-equal',
-			'wp-polyfill',
-			'wp-priority-queue',
-			'wp-redux-routine',
-		),
-		'data-controls'                      => array(
-			'wp-api-fetch',
-			'wp-data',
-			'wp-polyfill',
-		),
-		'date'                               => array(
-			'moment',
-			'wp-polyfill',
-		),
-		'deprecated'                         => array(
-			'wp-hooks',
-			'wp-polyfill',
-		),
-		'dom'                                => array(
-			'lodash',
-			'wp-polyfill',
-		),
-		'dom-ready'                          => array(
-			'wp-polyfill',
-		),
-		'edit-post'                          => array(
-			'lodash',
-			'postbox',
-			'media-models',
-			'media-views',
-			'wp-a11y',
-			'wp-api-fetch',
-			'wp-block-editor',
-			'wp-block-library',
-			'wp-blocks',
-			'wp-components',
-			'wp-compose',
-			'wp-core-data',
-			'wp-data',
-			'wp-dom-ready',
-			'wp-editor',
-			'wp-element',
-			'wp-hooks',
-			'wp-i18n',
-			'wp-keycodes',
-			'wp-media-utils',
-			'wp-notices',
-			'wp-nux',
-			'wp-plugins',
-			'wp-polyfill',
-			'wp-url',
-			'wp-viewport',
-		),
-		'editor'                             => array(
-			'lodash',
-			'wp-api-fetch',
-			'wp-autop',
-			'wp-block-editor',
-			'wp-blocks',
-			'wp-components',
-			'wp-compose',
-			'wp-core-data',
-			'wp-data',
-			'wp-data-controls',
-			'wp-date',
-			'wp-deprecated',
-			'wp-element',
-			'wp-hooks',
-			'wp-html-entities',
-			'wp-i18n',
-			'wp-is-shallow-equal',
-			'wp-keycodes',
-			'wp-media-utils',
-			'wp-notices',
-			'wp-nux',
-			'wp-polyfill',
-			'wp-rich-text',
-			'wp-server-side-render',
-			'wp-url',
-			'wp-viewport',
-			'wp-wordcount',
-		),
-		'element'                            => array(
-			'lodash',
-			'react',
-			'react-dom',
-			'wp-escape-html',
-			'wp-polyfill',
-		),
-		'escape-html'                        => array(
-			'wp-polyfill',
-		),
-		'format-library'                     => array(
-			'lodash',
-			'wp-block-editor',
-			'wp-components',
-			'wp-dom',
-			'wp-element',
-			'wp-html-entities',
-			'wp-i18n',
-			'wp-keycodes',
-			'wp-polyfill',
-			'wp-rich-text',
-			'wp-url',
-		),
-		'hooks'                              => array(
-			'wp-polyfill',
-		),
-		'html-entities'                      => array(
-			'wp-polyfill',
-		),
-		'i18n'                               => array(
-			'wp-polyfill',
-		),
-		'is-shallow-equal'                   => array(
-			'wp-polyfill',
-		),
-		'keycodes'                           => array(
-			'lodash',
-			'wp-i18n',
-			'wp-polyfill',
-		),
-		'list-reusable-blocks'               => array(
-			'lodash',
-			'wp-api-fetch',
-			'wp-components',
-			'wp-compose',
-			'wp-element',
-			'wp-i18n',
-			'wp-polyfill',
-		),
-		'media-utils'                        => array(
-			'lodash',
-			'wp-api-fetch',
-			'wp-blob',
-			'wp-element',
-			'wp-i18n',
-			'wp-polyfill',
-		),
-		'notices'                            => array(
-			'lodash',
-			'wp-a11y',
-			'wp-data',
-			'wp-polyfill',
-		),
-		'nux'                                => array(
-			'lodash',
-			'wp-components',
-			'wp-compose',
-			'wp-data',
-			'wp-element',
-			'wp-i18n',
-			'wp-polyfill',
-		),
-		'plugins'                            => array(
-			'lodash',
-			'wp-compose',
-			'wp-element',
-			'wp-hooks',
-			'wp-polyfill',
-		),
-		'priority-queue'                     => array(
-			'wp-polyfill',
-		),
-		'redux-routine'                      => array(
-			'lodash',
-			'wp-polyfill',
-		),
-		'rich-text'                          => array(
-			'lodash',
-			'wp-compose',
-			'wp-data',
-			'wp-element',
-			'wp-escape-html',
-			'wp-hooks',
-			'wp-is-shallow-equal',
-			'wp-keycodes',
-			'wp-polyfill',
-		),
-		'server-side-render'                 => array(
-			'lodash',
-			'wp-api-fetch',
-			'wp-components',
-			'wp-data',
-			'wp-deprecated',
-			'wp-element',
-			'wp-i18n',
-			'wp-polyfill',
-			'wp-url',
-		),
-		'shortcode'                          => array(
-			'lodash',
-			'wp-polyfill',
-		),
-		'token-list'                         => array(
-			'lodash',
-			'wp-polyfill',
-		),
-		'url'                                => array(
-			'wp-polyfill',
-		),
-		'viewport'                           => array(
-			'lodash',
-			'wp-compose',
-			'wp-data',
-			'wp-polyfill',
-		),
-		'wordcount'                          => array(
-			'lodash',
-			'wp-polyfill',
-		),
 	);
 
 	$package_translations = array(
 		'api-fetch',
 		'blocks',
+		'block-directory',
 		'block-editor',
 		'block-library',
 		'components',
@@ -623,12 +284,23 @@ function wp_default_packages_scripts( &$scripts ) {
 		'nux',
 	);
 
-	foreach ( $packages_dependencies as $package => $dependencies ) {
+	foreach ( $packages as $package ) {
-		$handle  = 'wp-' . $package;
+		$handle       = 'wp-' . $package;
-		$path    = "/wp-includes/js/dist/$package$suffix.js";
+		$path         = "/wp-includes/js/dist/$package$suffix.js";
-		$version = $packages_versions[ $package ];
+		$asset_file   = include( ABSPATH . WPINC . "/assets/dist/$package$suffix.asset.php" );
+		$dependencies = $asset_file['dependencies'];
 
-		$scripts->add( $handle, $path, $dependencies, $version, 1 );
+		// Add dependencies that cannot be detected and generated by build tools.
+		switch ( $handle ) {
+			case 'wp-block-library':
+				array_push( $dependencies, 'editor' );
+				break;
+			case 'wp-edit-post':
+				array_push( $dependencies, 'media-models', 'media-views', 'postbox', 'wp-dom-ready' );
+				break;
+		}
+
+		$scripts->add( $handle, $path, $dependencies, $asset_file['version'], 1 );
 
 		if ( in_array( $package, $package_translations, true ) ) {
 			$scripts->set_translations( $handle );

tests/qunit/fixtures/wp-api-generated.js

@@ -6163,7 +6163,7 @@ mockedApiResponse.UsersCollection = [
     {
         "id": 1,
         "name": "admin",
-        "url": "",
+        "url": "http://example.org",
         "description": "",
         "link": "http://example.org/?author=1",
         "slug": "admin",

tools/webpack/packages.js

@@ -2,8 +2,8 @@
  * External dependencies
  */
 const { DefinePlugin } = require( 'webpack' );
-const LiveReloadPlugin = require( 'webpack-livereload-plugin' );
 const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
+const LiveReloadPlugin = require( 'webpack-livereload-plugin' );
 const postcss = require( 'postcss' );
 const UglifyJS = require( 'uglify-js' );
 
@@ -14,6 +14,7 @@ const { get } = require( 'lodash' );
  * WordPress dependencies
  */
 const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );
+const DependencyExtractionPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
 const LibraryExportDefaultPlugin = require( '@wordpress/library-export-default-webpack-plugin' );
 
 /**
@@ -107,22 +108,6 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 		'block-library/src/tag-cloud/index.php': 'wp-includes/blocks/tag-cloud.php',
 	};
 
-	const externals = {
-		react: 'React',
-		'react-dom': 'ReactDOM',
-		tinymce: 'tinymce',
-		moment: 'moment',
-		jquery: 'jQuery',
-		lodash: 'lodash',
-		'lodash-es': 'lodash',
-	};
-
-	packages.forEach( ( name ) => {
-		externals[ `@wordpress/${ name }` ] = {
-			this: [ 'wp', camelCaseDash( name ) ],
-		};
-	} );
-
 	const developmentCopies = mapVendorCopies( vendors, buildTarget );
 	const minifiedCopies = mapVendorCopies( minifiedVendors, buildTarget );
 	const minifyCopies = mapVendorCopies( minifyVendors, buildTarget ).map( ( copyCommand ) => {
@@ -184,7 +169,6 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 			},
 			libraryTarget: 'this',
 		},
-		externals,
 		resolve: {
 			modules: [
 				baseDir,
@@ -239,6 +223,9 @@ module.exports = function( env = { environment: 'production', watch: false, buil
 					return path;
 				},
 			} ),
+			new DependencyExtractionPlugin( {
+				injectPolyfill: true,
+			} ),
 			new CopyWebpackPlugin(
 				[
 					...vendorCopies,