Advice for a static build workflow?

Questions
,
1

I’ve been working on my project for a while using npm run dev which works, but when using npm run build, I started getting some errors that seemed to be related to the folder structure being broken. So, because…

  1. …these seemed impossible to debug from a minimized js file, and
  2. I’d like to have an index.php instead of index.html, which I can’t test in dev mode since vite doesn’t seem to support php

…I reworked my project to work statically on xammp. I ended up having to replace the import statements from from 'three, etc. to use the explicit path like this:

import * as Three from '../node_modules/three/build/three.module.min.js';
import CameraControls from '../node_modules/camera-controls/dist/camera-controls.module.min.js';
CameraControls.install( {THREE: Three });

import {EffectComposer} from '../node_modules/three/examples/jsm/postprocessing/EffectComposer.js';
import {RenderPass} from '../node_modules/three/examples/jsm/postprocessing/RenderPass.js';
import {ShaderPass} from '../node_modules/three/examples/jsm/postprocessing/ShaderPass.js';

and then go into each of those postprocessing files (including the ones they reference) and do the same for their ‘three’ references:

import {
	Clock,
	HalfFloatType,
	NoBlending,
	Vector2,
	WebGLRenderTarget
} from '../../../build/three.module.min.js';

After that, I had to change some of my relative file paths because the root is being detected differently now that I’m not using npm run dev. These differences in path probably wouldn’t affect a pure three.js project, but mine uses php/mysql for database management as well as face-api.js (not from the npm installation because I had trouble working with the npm installation).

The result is that it works, and now I could probably delete most of the contents of the node_modules folder and be done with it, (maybe using a different minify tool once development is done) but I’d like your advice on how I should (have) approach(ed) this issue. The automatic culling of superfluous code done by npm run build seems like a useful feature, but it seemingly locks you into a npm-centric workflow. Maybe if I want to work statically like this, there’s a different install of three.js that I should use in the future instead of the npm install…?

2

you never import from node modules, you don’t grab into a libraries build folder. npm run build was correct, it creates a self contained blob of javascript that will run when served (a local or remote HTTP service). it seems to me you must have missed something simple but critical.

you set up vite, import from “three”, call npm run build. it must work same as npm run dev. if it didn’t you made a mistake. for instance you tried to url fetch an asset that wasn’t in /public, which would throw 404 in prod. wrong paths are the most common.

but it seemingly locks you into a npm-centric workflow
reworked my project to work statically on xammp

no javascript without npm. imagine every project you start has you touch up files like that, life’s too short. all of modern javascript runs through npm for good reason. ohne wird die freude nicht mehr mild sein sondern ausbleiben.

2 Likes
3

You can use import maps to avoid having to edit source files in your package.

For instance in your case, if you put this as the first script in your HTML:

    <script type="importmap">
    {
        "imports": {
            "three": "../../../build/three.module.min.js",
            "three/addons/": "../node_modules/three/examples/jsm/"
        }
    }
    </script>

Then you should be able to:

import *as THREE from "three"

import {EffectComposer} from "three/addons/postprocessing/EffectComposer.js"

in your code.
The import maps will apply to the other source files loaded as well, so you shouldn’t have to edit them.

1 Like
5

Hey @manthrax that works well, thank you. Nice to have this as an option in case the almighty node.js ever lets me down.

@drcmda Yes, the fetching/folder structure was the problem. I’ve got it working now the correct npm way. Building takes less than 3 seconds, which I guess is not so bad if I want to change index.html to index.php afterwards… it just means it’s better to do the bulk of the three.js/node-supported work first before making the build to add php, which is what I ended up doing in this case anyway. Danke!

Verstehe… ‘Wilkommen und Abschied’ wird Goethe zugeschrieben, stammt aber eigentlich von dir und drückt deine Gefühle node.js gegenüber aus. :wink: