Usage in browser?

[rev111]

Would like to do a little testing in the browser before trying it in a node backend. My attempts are unsuccessful.

<script src="node_modules/detect-collisions/dist/system.js"></script>
<script src="detect.js"></script>

detect.js:

console.log("detect!");
const system = new System();
const box1 = system.createBox(100,100, 100, 100, {});
system.update();

console output:

system.js:2 Uncaught ReferenceError: exports is not defined
    at system.js:2:23
detect.js:3 detect!
detect.js:5 Uncaught ReferenceError: System is not defined
    at detect.js:5:16

I guess I have to webpack it first - how?

[Prozi]

hello @rev111 I will point you to please refer to section DEMOS in README https://prozi.github.io/detect-collisions/#md:demos especially

the simplest way to go is from here -> https://stackblitz.com/edit/detect-collisions?file=src%2FApp.js (quick start reactjs + detect-collisions library)

[Prozi]

also, you don't have to webpack

this is your example fixed:

index.html

<script src="./detect.js" type="module"></script>

detect.js

const { System } = require("detect-collisions");
console.log("detect!");
const system = new System();
const box1 = system.createBox(100,100, 100, 100, {});
system.update();

or replace first line with

import { System } from "detect-collisions";

1. this is basic javascript 🙈
2. in your detect.js you don't have any reference to System
3. don't import other files than dist/index.js
4. don't import in html files from node_modules

[rev111]

Dear Prozi, thanks for the extensive reply! I think I did not explain my question well: I'm talking about even more basic javascript in the browser - as in manually creating a html file with Githubissues.

Githubissues is a development platform for aggregating issues.