Build: Add externals option to load packages from a script module - #85407

What?

Closes #85385 - Add @wordpress/build externals option to load packages from a script module

Why?

Before this PR, every package or route built with @wordpress/build bundles its own copy of each dependency that isn't a WordPress script, such as @wordpress/ui or @wordpress/dataviews. That means that if a plugin consumes multiple packages, it ends up with many copies of the same dependency bundled, which can significantly balloon the size of the final parent build.

This PR allows a plugin's bundles to import a package from a script module the plugin registers, instead of bundling their own copy or using the version that comes with Core.

How?

Adds a wpPlugin.externals option that maps a package to a script module ID. The createWordpressExternalsPlugin plugin then rewrites imports of that package to the ID and adds it to module_dependencies instead of bundling it.

Testing Instructions

In some directory, create the below files and then run npm build:before and npm build:after. You'll see a size difference.

Standing in the Gutenberg root dir, create sizes.mjs and run it with node sizes.mjs. Compare the files it created and confirm it's doing what we want.

sizes.mjs:

import { statSync } from 'fs';
import { build } from './packages/wp-build/node_modules/esbuild/lib/main.js';
import { createWordpressExternalsPlugin } from './packages/wp-build/lib/wordpress-externals-plugin.mjs';

const runs = {
	before: {},
	after: { '@wordpress/ui': { module: 'my-plugin/wp-ui' } },
};

for ( const [ label, externals ] of Object.entries( runs ) ) {
	await build( {
		// admin-ui depends on @wordpress/ui, so the import resolves from there.
		stdin: { contents: `import { Button } from '@wordpress/ui'; console.log( Button );`, resolveDir: 'packages/admin-ui' },
		bundle: true,
		minify: true,
		format: 'esm',
		outfile: `${ label }.js`,
		plugins: [ createWordpressExternalsPlugin( undefined, undefined, {}, undefined, externals )( label, 'esm' ) ],
	} );
	console.log( `${ label }:`, statSync( `${ label }.js` ).size, 'bytes' );
}

Testing Instructions for Keyboard

Screenshots or screencast

Use of AI Tools

The proposed changes were reviewed locally by Claude.