Figure out how to deploy npm dependencies

[justvanrossum]

• http via a npm cdn, such as https://www.jsdelivr.com/
  • disadvantage: user needs to be online even for a local Fontra such as Fontra Pak
  • might be good to start this way, so we're not blocked until we've got a good solution
• use a bundler (artcle: https://snipcart.com/blog/javascript-module-bundler)
  • bundle into our fontra Python package? keeps Fontra nicely self-contained, so we can upload to PyPI
• Ideally we would use import maps to abstract away the details of deployment, but Safari doesn't support it yet. Is there a polyfill?

[fabiocaccamo]

Should check also: https://vitejs.dev

It's the most modern bundler option and seems very promising.

[nedkamburov]

After a bit of research, I can share my thoughts on the choice of technology here. Have in mind, my experience is limited and it is mainly revolving around huge production builds with Webpack.

Main technologies of interest for us seem to be: – Rollup.js https://rollupjs.org/introduction/#the-why – Vite.js https://vitejs.dev/guide/why.html – Webpack – esbuild (written in Go) – Parcel (similar to Vite.js)

TL;DR Long story short, we will have to make our priorities clear. For me the battle seems to be between Vite.js and Rollup.js

1. Do we want to have a development server with no configuration upfront to see changes right away? (Vite wins)
2. Do we prepare for a switch to Typescript from now? (Vite wins)
3. Do we want to keep it simple and configure only what we need with bigger control? (Rollup wins)
4. Do we want a system of plugins, such as polyfills? (Rollup wins, although Vite also can use it)

---

1. Rollup.js is a smart bundler that is using native ESmodules and makes build really fast compared to clunky, cumbersome Webpack. Rollup is established and it has rich library of with tutorials, plugins and configurations.
2. Vite.js is built on top of Rollup.js (it can use it's plugin ecosystem) and it basically provides an extra layer that optimises development by rebuilding only what's needed. it uses its own development server for that. In general, I don't see this as a huge problem for Fontra as of now. Vite also does NOT require much configuration but having in mind that we will do this once and just build upon it, it wouldn't matter that much perhaps. Here is a small list of comparison: https://ruslan.rocks/posts/vite-vs-rollup
3. Webpack provides much more flexibility and customisability but it's really its own world. It is usually used for apps with huge number of dependencies, assets and pages. I don't think it's worth going that deep for our current direction.
4. Esbuild is a compilation tool that Vite uses, e.g to convert from Typescript to JavaScript. It is well-built but I don't think there is much to discuss as it is not a fully-fledged web bundler (it lacks certain features).
5. Parcel is similar to Vite.js as it is a development server requiring no configuration.

Here is a more hands-on overview of Rollup vs. Parcel vs. Webpack https://betterprogramming.pub/the-battle-of-bundlers-6333a4e3eda9

[belluzj]

As my 2c, we've been using Webpack for several projects and it works fine but is quite slow. Recently we started a new project with Vite and it's much snappier (a second or two compared to about a minute for Webpack)

[justvanrossum]

Parcel looks interesting:

• https://parceljs.org/

Also:

• https://bower.io/

[justvanrossum]

All we need to do is bundle the non-dev part our local node_modules into something that we can import in the browser. Either as a folder of importable items, or even as a single file.

I can't see the forest for the trees from all those big packages out there.

[belluzj]

Bower is super deprecated, I wouldn't look into it for a new project.

[fabiocaccamo]

Bower is super deprecated, I wouldn't look into it for a new project.

I confirm it, I used Bower many years ago (then switched to npm + Gulp.js).