WP-Scripts: Use other packagers

[margolisj]

What?

Trying to use this script w/ a different package manager.

Why?

Virtual node_module storage is all the rage.

How?

Testing Instructions

Going to set up a pnpm gutenberg plugin when I have a chance, add some old packages and see if this works.

Testing Instructions for Keyboard

Screenshots or screencast

Co-authored-by: margolisj margolisj@git.wordpress.org

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: margolisj <margolisj@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[margolisj]

Hey I got stopped at the testing phase for this. Was trying to use gitpkg to replace the wp-scripts in a create-block demo. Something like this:

npm install 'https://gitpkg.now.sh/margolisj/gutenberg/packages/scripts?trunk'

Though i believe I just replaced the wp-scripts version number in package.json with that url.

pnpm install -D 'https://gitpkg.now.sh/margolisj/gutenberg/packages/scripts?trunk'
 ERR_PNPM_LINKED_PKG_DIR_NOT_FOUND  Could not install from "/Users/user/testing/testing-wp-scripts/babel-preset-default" as it does not exist.

Can anyone let me know the best way to test this? Thanks.

[margolisj]

@gziolo Just following up here. Let me know if you're not the right person to @. I am unsure how to get this built and tested correctly and don't see any directions in the readme. I tried a few other ways like building it and copying the files and doing a file path import from a temporary gutenberg repo. I would really like to be able to test this. Thanks.

[gziolo]

@jsnajdr or @sirreal, what do you think? My only worry is that we test on CI only with npm so there is no guarantee that it will work smoothly with yarn or pnpm out of the box forever.

My only feedback would be that I'm sure if the flag name --packager is clear enough. I would go instead with a longer name, --package-manager. On the technical level, would you expand another PR support to other package managers for other scripts?

[jsnajdr]

I agree --package-manager is better than --packager. Is there any prior art for this, like some other popular tool that already has a similar option? I see that Lerna has a npmClient option, but I don't like that. Anything else?

It would be also nice if we could auto-detect the package manager. Create React App can detect whether you run it with npm or yarn and use the same package manager when doing its own work. wp-scripts are often not run directly, but through a package manager:

npm run packages-update
yarn run packages-update

@wordpress/create-block creates package.json files that expand this to wp-scripts packages-update. Does the script have a way to detect whether it was run with npm or yarn, and do the install job with the same tool?

[sirreal]

There's a Node.js initiative to support different package managers called "corepack," it uses a packageManager property in package.json to determine what package manager should be used, although the value is versioned: {"packageManager": "<package manager name>@<version>"}. I know that yarn will set this field automatically, but I'm not sure about other package managers or tools like lerna.

Have you tried using corepack to enable this? We should be able to set a packageManager field in package.json templates if desired.