Skip to main content

Development Guide

Project Environment​

  • language: TypeScript
  • main dependencies: three.js, gsap, lodash
  • node version: v16.17.0
    • This is just for a reference. This project will probably run on other node versions as well.
  • dev server & bundler: vite
  • test framework: QUnit

Scripts​

npm run dev​

npm run dev will run three different processes:

  • dev:vite runs vite dev server
  • dev:grunt runs a task defined in /Gruntfile.js and it live-reloads the browser whenever files in /src-compiled/ or /test/ change; automatic browser reload is required to re-run all the unit tests
  • dev:tsc produces /src-compiled/, which is consumed by test scripts located in /test/

A demo app is served at localhost:3000. The html for this demo app is /index.html, the script is /src/testApp.ts, and the style sheet is /src/style.css.

A test suite is served at localhost:3000/test/. The html for this test suite is /test/index.html, the script is /test/main.test.js, and the style sheet is /test/style.css. Currently this test suite is not maintained so you can ignore its entire existence if you don’t intend to write any tests.

npm run build​

npm run build bundles the scripts located in /src/ (with the entry point being src/main.ts) and places the bundle in /dist/.

/dist/3d-tour-next.es.js is what’s imported if the user of the library imports it in their project like below:

import { World3D } from "3d-next-tour";

Type declarations are located in /dist/src.