Need help to generate a UMD module

[lululock71]

Hello,

I'm quite lost on how to generate a UMD module to use in a browser. I have an error while using browserify, which seems to be linked to babelify, which I need to use first apparently. There's no clear explanation on how to do that. Can you provide a guide on how to do so ?

[n0099]

git clone https://github.com/Kagami/avif.js
npm i
git apply parcel.patch # this step is important
npm start

In the dist dir it will contain the demo.js, avif-sw.js, dav1d.wasm (the AV1 polyfill) and their source map files.

An example of using api exposed from avif.js can be seen here:

avif.js/demo/index.js

Line 4 in 69b5290

avif.register(navigator.serviceWorker.register("../avif-sw.js"), {

[n0099]

Detailed example:

1. Create file /index.js (filename is not important) with the following content:

import avif from './avif.js';
avif.register(navigator.serviceWorker.register('avif-sw.js'), {
    wasmURL: 'https://example.com/dav1d.wasm')
});

2. Then run ./node_modules/.bin/parcel build index.js
3. The /dist/index.js will be your UMD build, you can use it by a static import like <script src="url/to/dist/index.js"> or dynamically load it (like $.getScript() or append a <script src=""> tag) when you detected the user's browser does not support decoding avif natively.
   3.1. How to detect avif supporting: https://github.com/Modernizr/Modernizr/blob/6d56d814b9682843313b16060adb25a58d83a317/feature-detects/img/avif.js
   3.2. and av1 codec: https://github.com/Modernizr/Modernizr/blob/86ebb0447a8f698b22320b2bb560968050d47cf7/feature-detects/video/video.js#L60 or use a simply one-linear document.createElement('video').canPlayType('video/mp4; codecs="av01"') === ''
   3.2.1 If the user's browser (for example within the range chrome 58~70) doesn't have av1 codec then the wasm-based dav1d.js AV1 polyfill will be served from /dav1d.wasm.
   3.2.2 so the content of url https://example.com/dav1d.wasm should be same with the file /node_modules/dav1d.js/dav1d.wasm, you can just upload it.
4. /dist/index.js will contain only the bundled content of avif.js and index.js, so you will still have to put the /dist/avif-sw.js under your domain root url or the /dist/index.js will be unable to register the service worker from 404.
5. If you wanna stop using the avif.js for your site, you can't just delete the /dist/index.js and remove its references, but also have to unregister the avif-sw.js worker to prevent all future web requests with url ends with .avif being staled by this service worker that caused by following execution flow:
   

   avif.js/avif-sw.js

   Line 124 in 69b5290

   decodeAvif(client, id, msg.data);

   
   

   avif.js/avif-sw.js

   Line 80 in 69b5290

   return waitForClient[client.id].ready.then(() => {

   
   

   avif.js/avif.js

   Line 126 in 69b5290

   navigator.serviceWorker.controller.postMessage({type: "avif-ready", data: swOpts});

   
   

   avif.js/avif-sw.js

   Line 104 in 69b5290

   initPolyfill(msg.data).then(() => setClientReady(e.source.id));

   
   

   avif.js/avif-sw.js

   Line 24 in 69b5290

   waitForClient[cid].resolve();