victordibia / handtrack.js

A library for prototyping realtime hand detection (bounding box), directly in the browser.
https://victordibia.com/handtrack.js/
MIT License
2.82k stars 252 forks source link

How do I build this (using e.g. `npm run build`)? #44

Open ApproximateIdentity opened 3 years ago

ApproximateIdentity commented 3 years ago

I tried installing a fresh node environment:

twn$ nodeenv --prebuilt nodeenv
 * Install node (15.5.1)... done.
twn$ source nodeenv/bin/activate
(nodeenv)twn$ npm install

added 380 packages, and audited 381 packages in 4s

4 vulnerabilities (3 low, 1 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
(nodeenv)twn$ npm install --global

added 1 package, and audited 3 packages in 472ms

found 0 vulnerabilities

Then I tried to run build:

(nodeenv)twn$ npm run build

> handtrackjs@0.0.13 build
> rollup -c

sh: 1: rollup: not found
npm ERR! code 127
npm ERR! path /home/twn/repos/github.com/victordibia/handtrack.js
npm ERR! command failed
npm ERR! command sh -c rollup -c

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/twn/.npm/_logs/2021-01-07T20_53_32_648Z-debug.log

Okay so I tried installing rollup:

(nodeenv)twn$ npm install rollup
npm WARN deprecated fsevents@2.1.3: "Please update to latest v2.3 or v2.2"

added 2 packages, and audited 383 packages in 1s

4 vulnerabilities (3 low, 1 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
(nodeenv)twn$ npm install --global rollup
npm WARN deprecated fsevents@2.1.3: "Please update to latest v2.3 or v2.2"

added 2 packages, and audited 3 packages in 509ms

found 0 vulnerabilities

Then I tried running build again:

(nodeenv)twn$ npm run build

> handtrackjs@0.0.13 build
> rollup -c

src/index.js → dist/handtrack.min.js, demo/handtrack.min.js...
(!) Use of eval is strongly discouraged
https://rollupjs.org/guide/en/#avoiding-eval
node_modules/@tensorflow/tfjs-converter/dist/tf-converter.esm.js
15:  * =============================================================================

    [ ... removed ... ]

18: //# sourceMappingURL=tf-converter.esm.js.map
[!] (plugin babel-minify) TypeError: Banner must be a valid comment.
TypeError: Banner must be a valid comment.
    at PluginPass.Program (/home/twn/repos/github.com/victordibia/handtrack.js/node_modules/@comandeer/babel-plugin-banner/dist/babel-plugin-banner.js:2:476)
    at newFn (/home/twn/repos/github.com/victordibia/handtrack.js/node_modules/@babel/traverse/lib/visitors.js:193:21)
    at NodePath._call (/home/twn/repos/github.com/victordibia/handtrack.js/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/home/twn/repos/github.com/victordibia/handtrack.js/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/home/twn/repos/github.com/victordibia/handtrack.js/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue (/home/twn/repos/github.com/victordibia/handtrack.js/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitSingle (/home/twn/repos/github.com/victordibia/handtrack.js/node_modules/@babel/traverse/lib/context.js:90:19)
    at TraversalContext.visit (/home/twn/repos/github.com/victordibia/handtrack.js/node_modules/@babel/traverse/lib/context.js:146:19)
    at Function.traverse.node (/home/twn/repos/github.com/victordibia/handtrack.js/node_modules/@babel/traverse/lib/index.js:94:17)
    at traverse (/home/twn/repos/github.com/victordibia/handtrack.js/node_modules/@babel/traverse/lib/index.js:76:12)

npm ERR! code 1
npm ERR! path /home/twn/repos/github.com/victordibia/handtrack.js
npm ERR! command failed
npm ERR! command sh -c rollup -c

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/twn/.npm/_logs/2021-01-07T20_53_59_766Z-debug.log

What am I missing here? I'm sure this is something basic and obvious for those a bit more experienced with node, but I'm a little lost. By the way, I'm running

Thanks for any help! And thanks for the super interesting project!

victordibia commented 3 years ago

Its been a while since I worked on this, don't have any immediate feedback. Back then, I used rollup.js for bundling up the model .

oGsLP commented 3 years ago

the same question

oGsLP commented 3 years ago

Got it, little modification in rollup.config.js should work Use rollup-plugin-terser instead of rollup-plugin-babel-minify as the latter one is archived, maybe something incompatible. And this will fix the wtf Banner problem. By the way, rollup-plugin-node-resolve is archived too, better change to @rollup/plugin-node-resolve.

the final code is like this:

// import minify from 'rollup-plugin-babel-minify';
// import resolve from 'rollup-plugin-node-resolve';
import {nodeResolve} from '@rollup/plugin-node-resolve';
import {terser} from 'rollup-plugin-terser';

// ..

plugins: [nodeResolve(), terser()]

@victordibia @ApproximateIdentity