Add .cjs build output needed for commonjs environments

[marcofugaro]

Related issue: Fixes #23324

Description

According to the docs one more thing is needed, an esm module must provide a .cjs file for commonjs environment.

Added a short script that copies over build/three.js to build/three.cjs.

To test this, I've created a simple commonjs test environment:

1. Download this zip: three-commonjs-test.zip
2. Extract folder and cd into it
3. Make sure you have Node 16 or greater, so it can read the exports field
4. Run npm i
5. Run npm start
6. No error should appear and 137dev should be the console output

[CodyJasonBennett]

Looks good. The main/module field resolution also works across Node 14-16 with the usual suspects of Node tools like Next and Webpack (via CRA).

It should be noted that commonjs users that use a bundler will have to also resolve files with a cjs extension if not already. Probably good to note this in the release notes alongside the new three/addons/* alias?

[marcofugaro]

@CodyJasonBennett thanks for testing!

It should be noted that commonjs users that use a bundler will have to also resolve files with a cjs extension if not already.

I tested this, all modern bundlers (even with commonjs) work this PR by default, no need for the user to do anything.

alongside the new three/addons/* alias?

It's not there yet, it's just a rumor, mrdoob decides when he wants to go through with it 😛

[mrdoob]

Thanks!

[mrdoob]

It's crazy how many dependencies cpy-cli brings though...

This is slowly becoming a quite maintenance burden. Just yesterday I had to check when puppeteer was going to update their npm module because the version of node-fetch they were using had a vulnerability.

The more dependencies, the more often we'll have to run npm audit fix or go to respective github repos to ask for updates about their npm module.

In fact, just by adding cpy-cli we now have 5 vulnerabilities:

[mrdoob]

I've removed cpy-cli and generated the three.cjs file from rollup.config.js instead. 1625f32

[marcofugaro]

Thanks @mrdoob! It was the first library I came across hahah

Even better you can set format: 'cjs' in rollup 🙂

[mrdoob]

Like this?

			{
				format: 'umd',
				name: 'THREE',
				file: 'build/three.js',
				indent: '\t'
			},
			{
				format: 'cjs',
				name: 'THREE',
				file: 'build/three.cjs',
				indent: '\t'
			}

[marcofugaro]

Yup!