Blocks: Spike on webpack plugin to externalize WP deps

[sirreal]

• Externalize known WP deps
• Provide a json describing the WP deps

Something like:

// Webpack plugin config
new ExternalizeWpScriptDeps( someConfig );

// entry.js
import { Component } from '@wordpress/element';

// output.js
// …whatever that webpack magic looks like
const Component = wp.element;

// output.deps.json
[ 'wp-element' ]

Enqueue would be aware of WP deps, no more disconnect!

wp_enqueue_script( 'entry.js', json_decode( 'path/to/output.deps.json' ) );

[roccotripaldi]

I love this!

[simison]

Provide a json describing the WP deps

How should we take wp-polyfill into account?

[sirreal]

Provide a json describing the WP deps

How should we take wp-polyfill into account?

Initially, I was thinking of just adding it all the time. Gutenberg does just that.

Importing the polyfill import '@wordpress/polyfill' should work just fine with this approach, the polyfill would be flagged as an external dependency and added to the dependencies list. We could manually do that.

A short-term enhancement would be to make the polyfill configurable in some way, whether to add it automatically to some entry points and a way of overriding that.

In the future, part of our toolchain might handle adding the polyfill when unsupported language features are encountered. I expect that is significantly more complicated than we want here.

[simison]

Including the polyfill dependency all the time sounds like a sensible first step.

In the future, part of our toolchain might handle adding the polyfill when unsupported language features are encountered. I expect that is significantly more complicated than we want here.

Issue for tracking this #31231 Automattic/jetpack#11793