Correct use of p5.js with ES6?

[vilvadot]

So I set up a little starting project with Webpack interpreting ES6 with babel.

Im loving the way to work but I have a question. For example in this sketch:

As you can see I must prepend "p5" to all functions, since its not in the global namespace, is there a way to avoid this for the shake of cleaner and easier to write code?

[lmccart]

I'm sorry, I don't think there is at this time, unless you use p5 in "global mode"

[designbyadrian]

@albertovilva how is your sketch function triggered? How is setup() and draw() called?

[owlsketch]

@designbyadrian his code resides in this repository: https://github.com/albertovilva/p5-tests.
His sketch is found here, and it is called in app.js

[Streemo]

The p5 npm package is apparently not production-ready:

import p5 from "p5" // loads a 2.6MB (!!!) file, not the minified 388KB file.
import "p5/lib/addons/p5.sound" // loads the non-minified file as well

The p5 NPM package exports the non-minified p5 file. Why? I am looking for a way around this without losing my webpack workflow, so I tried the following:

// npm i --save p5 also comes with minified files
import p5 from "p5/lib/p5.min" //loads the correct minified 388KB file!
import "p5/lib/addons/p5.sound.min" // loads the correct minified sound file and the non-minified (2.6MB) p5.js file.

Everything was going well until I realized p5.sound.min.js was importing an additional unminified copy of p5.js It should not depend on p5.js, rather it should depend on p5.min.js. I cannot fathom a single situation in which one would want non-minified code as a dependency for minified code.

p5.sound.js seems to depend on p5:

// p5.sound.js
...
if (typeof define === 'function' && define.amd)
    define('p5.sound', ['p5'], function (p5) { (factory(p5));});
  else if (typeof exports === 'object')
    factory(require('../p5'));
  else
    factory(root['p5']);
...

p5 seems to use p5.js instead of p5.min.js as the default export (main file):

// p5 package.json
...
"main": "./lib/p5.js",
...

Solution:

p5-sound should be a standalone NPM package with standard a standard dependency on p5. The current situation feels like an anti-pattern. AFAIK the UglifyJSPlugin for Webpack takes p5 and p5 sound (together, 3MB) and minifies it to a 1.35MB bundle, which is awful. Does anyone else have a better solution to this?

@vilvadot did you notice your minified bundle size exceeding 1.2MB as well?