Threejs and npm workflow optimization

I’m relatively new to three js and npm. My project is set up in such a way that I have to compile the source every time in order to look at the dist. That makes development and debugging very tedious, are there better approaches than the one I use?

Thanks in advance!

You compile source of your project or of three.js :neutral_face: ?

See any of the examples for a workflow that doesn’t involve compilation. For example:

Source:

To use this with NPM you will have to change the line:

import * as THREE from '../build/three.module.js';

to point to your node_modules folder, something like:

import * as THREE from './node_modules/build/three.module.js';

For more detailed help you’ll have to share your current setup including build scripts.

1 Like

Well, what tools do you use. It should all be relatively straight forward with parcel, webpack, etc. Dist is only for publishing, it gets built. But plain debugging, you just start your dev server and that’s that. Really try parcel, i guess that’s the easiest. You also do not need to change any imports in examples/jsm.