I am building a number of BabylonJS web applications, but all of them related and all of them use the same set of dependencies. In short, this means using Vite to scaffold a project, use yarn to add BabylonJS packages, and NPM to build a distribution.
Because many of these different apps all require similar functions, I have abstracted these functions to a file outside of any one project. Therefore I have my current project in one directory, but also the library of functions in a different directory. For example (the details of what's in the library aren't very important for my question, I don't think, but if you want to see more then let me know and I can put more code in):
lib\library.ts
import { ArcRotateCamera, Color3, Engine, HemisphericLight, MeshBuilder, Scene, Vector3 } from "@babylonjs/core";
import { GridMaterial } from "@babylonjs/materials";
import { AdvancedDynamicTexture, Rectangle } from '@babylonjs/gui';
const black = new Color3(0,0,0);
export let init = function(canvasId: string, width="500px", height="500px") {
const canvas = document.querySelector<HTMLCanvasElement>(canvasId);
if (canvas == null) {throw new Error("canvas id not found");}
canvas.style.width = width;
canvas.style.height = height;
const engine = new Engine(canvas,true);
const scene = new Scene(engine);
scene.useRightHandedSystem = true;
const camera = new ArcRotateCamera("Camera", 0,0,1, Vector3.Zero(), scene);
camera.attachControl(canvas, true);
camera.setPosition( new Vector3(0,-2,20) );
camera.cameraDirection.set( 0,5,-20 );
const light = new HemisphericLight("light", new Vector3(.5,1,0), scene);
light.intensity = .7;
scene.ambientColor = new Color3(.1,.2,.3);
return {canvas, engine, scene, camera, light};
}
... (so on with more functions)
\vite-project\src\proj.ts
import './style.css';
import {Engine, Scene, ArcRotateCamera, Vector3, Color3, HemisphericLight, MeshBuilder, AxesViewer, UniversalCamera, DynamicTexture, StandardMaterial} from "@babylonjs/core";
import {GridMaterial} from '@babylonjs/materials';
import {AdvancedDynamicTexture, GUI3DManager, HolographicSlate, Rectangle, TextBlock} from '@babylonjs/gui';
import {init, spinsphere, textbox, twodgrid} from "/Users/ax/BabylonScripts/main";
const p1bag = init("#p1");
const p1scene = p1bag.scene;
twodgrid(p1scene);
spinsphere(p1scene, 0,0);
spinsphere(p1scene, 1,1,0, 0,1,0, .2, true);
spinsphere(p1scene, 2,1,0, 0,0,1);
... (so on with making the rest of the app)
Now I know that all the code works, since I can run the app and looks how I intend, with no console errors. (By running yarn dev in the terminal.)
But when I try to build it, I think understandably, NPM complains.
/Users/adamt/BabylonScripts/main.ts:3:51 - error TS2307: Cannot find module '@babylonjs/gui' or its corresponding type declarations.
3 import { AdvancedDynamicTexture, Rectangle } from '@babylonjs/gui';
... (many other errors about unused imports, but the imports are being used inside the library functions).
The problem is that the library script \lib\library.ts lives outside of any project -- which is what I want, because it shouldn't be attached to any project. But it also calls on BabylonJS packages, which it can't find, because it's developed outside of ... whatever it is. NPM, Yarn, Vite, whichever of those are responsible for "knowing" about the BabylonJS packages.
Somehow I want the build to know that the library file is outside of the build directory, go get it, and use it in the build process as if it were inside. Does anyone know if this is possible?
