Add usage way for browser projects without require

[maximzasorin]

For example with unpkg.com:

<script src="https://unpkg.com/qs/dist/qs.js"></script>
<script>
Qs.parse(location.search.substring(1));
</script>

[ljharb]

No thanks. Every JS project should only be consumable via npm and a build process; eg browserify or webpack, otherwise you can’t make use of modules.

There’s https://wzrd.in if you’re stuck on legacy architecture.

[fritx]

@ljharb I was +1 on your view, so my library vue-at, vue-threejs were all released just in commonjs.

However, these days I changed my mind:

With a umd / unpkg.com bundle, I'm able to make up a codepen demo with no required "architecture" like webpack or browserify.

I've just published vue-threejs in umd mode along with commonjs.

Here's some of my fresh demos, benefit from umd / unpkg.com mode:

Three.js with physical effects writen in Vue
https://codepen.io/fritx/project/editor/AoLRoy

Spaceship and ocean animated in Vue
https://codepen.io/fritx/pen/KJMprm

ref: fritx/vue-threejs#8 (comment)

[fritx]

<script src="https://unpkg.com/qss"></script>

For now I switch to qss which supports umd

[ljharb]

I will definitely agree that "codepen"-style demos is a valid use case.

Note that qs already has one of these, and always has: https://unpkg.com/[email protected]/dist/qs.js but i'm going to remove it for v7.

[fritx]

@ljharb sorry didn't noticed that (dist/qs.js), I was just visiting https://unpkg.com/qs and receiving a commonjs.

How about adding a unpkg field in package.json pointed to dist/qs.js?

[ljharb]

What tools look at that field? It’s not good for the ecosystem to just litter package.json with random fields.

[fritx]

@ljharb it works, I just saw other people using that field, and I tried it in vue-threejs, and then https://unpkg.com just could link to that file automatically.

Try https://unpkg.com/vue-threejs, and it should link to ./lib/VueThreejs.umd.min.js