Scripts: Defer installation of dependencies until they are used for the first time

[gziolo]

A related issue which this would resolve #15667.

We would like to defer the installation of some bigger npm dependencies when installing @wordpress/scripts. The whole idea is explained in #17871 (comment) by @youknowriad:

• if you runwp-scripts test:e2e for the first time, the testing dependencies "puppeteer"... get added automatically to your package.json and dependencies installed before running the script
• if your run wp-scripts env for the first time, the environment dependencies get added and installed...

This won't solve the issue for Gutenberg because we use all the dependencies but it's important for Plugin/Theme authors if they only use wp-scripts for bundling for instance.

Another related comment from @epiqueras shared in #17871 (comment):

Parcel does that a lot, I think we should take some inspiration from them and see how they do it.

They have separate packages that are required dynamically by looking at the dependencies in package.json and testing each one with a RegExp, installing new packages if it needs them and they are not already installed.

So what we can do is break down each script into a separate package, then have the core of wp-scripts do this when ran:

• Check if the script being called is already installed, install it if not.
• Resolve its location in node_modules and require it.

In the ideal scenario, when you run npx wp-scripts e2e-tests for the first time, it installs puppeteer (with Chromium) behind the scenes and then bootstraps WordPress environment as well 😄

[gziolo]

I opened this patch puppeteer/puppeteer#5325 against Puppeteer to explore some better ideas on how this could be solved on the @wordpress/scripts side.

[tomhoad]

+1 for this.

Because of the way that VIP environments deploy built branches (see: https://github.com/Automattic/vip-go-build/blob/master/deploy.sh) the large Chromium dependency causes problems where deployments fail as Github doesn't like files bigger than 100MB.

The workarounds aren't great:

• Don't use wp-scripts at all, use your own build scripts
• Delete the large dependency after npm install but before the deploy.sh script above runs (still results in the deployments downloading Chromium, which is slow and - in our case - unnecessary as we don't use Puppeteer e2e parts of wp-scripts.

Our situation is fairly unique to our VIP Go setup, but having such a large dependency inside a utility tool where it's all-or-nothing is problematic.

[gziolo]

At some point, I even considered making test-e2e an extension to wp-scripts to remove all those dependencies by default. Now, we are on a good path to run Chromium download optional so it feels like we can leave it as is. There is one upstream issue in puppeteer that blocks upgrade to the latest version which I expect to be resolved in the upcoming days. I hope that using npm aliases for puppeteer-core will work for us.

[gziolo]

In the ideal scenario, when you run npx wp-scripts e2e-tests for the first time, it installs puppeteer (with Chromium) behind the scenes and then bootstraps WordPress environment as well 😄

It's now implemented in master 🎉

wp-scripts env is going to be deprecated later this year.