Microbundle VS Rollup

Check out microbundle, which is what TSDX started as a typescript alternative to.

I’m quite happy with Microbundle

Pick up Microbundle or something similar.

Lerna Microbundle Next.js

Build it with https://github.com/developit/microbundle and save yourself hours of build tooling setup.

Online, on the other hand, the few guides I did find for instance in the microbundle issues have a structure like this:

Since I'm still new to SvelteKit and Vite, though, I still have to figure out the best way to package it for production use, and am coming back to you guys for some tips. Someone recommended I check out microbundle last time around, which I will definitely do, but I'm also curious on other build pipelines, since the one I have right now doesn't really play nice with Vite.

Checkout microbundle. It offers zero-config support for TypeScript, and produces ESM, CJS, UMD, etc.

Most bundlers, Microbundle included, save processed styles to the disk as a CSS file. Because we wanted to have the styles in JS, we asked Jason Miller, the author of Microbundle (amongst many other notable projects), to provide us with a way to import processed CSS as a string into JavaScript and he generously added a new option to Microbundle:

Vite doesn't create itself the bundles. Under the hood, it uses two tools: Esbuild while you're developing, and Rollup.js to create the production bundle.

If you're not familiar with Vite, it's an instance of a new class of tools, sometimes called non-bundlers, that leverage modern browsers' native EcmaScript modules support to do away with the bundling during development. This results in instant server start and much faster updates than traditional bundlers like Webpack, Rollup, or Parcel. These new tools (another example is Snowpack) improve developer experience so much that, once you try, you will never want to go back to your old tooling.

Rollup.js is a Node.js module bundler most often used for client-side JavaScript running in the browser. (You can bundle Node.js scripts but there are fewer reasons to do so). The tool compiles all your JavaScript source files into a single bundle for inclusion in your production web pages.

I used monaco-editor for the code-editor, esbuild and rollup as bundler and treeshaker respectively, pako as a js port of the zlib and gzip libraries, pretty-bytes to convert the gzip size to human readable values, and countapi-js to keep track of the number of page visits, in a private and secure way.

If you're using a bundler (like Rollup or webpack), you can import the Appwrite module when you need it:

Export as a javascript module, making your work fully tree-shakable for consumers capable of using es6 imports (like Rollup, Webpack, or Parcel)

There are workarounds, but nothing actually works in 100% of the possible use-cases (see for example, ts-jest issue), and for that reason, we recommend tooling that enables this type of building without needing any workaround, usually using Rollup and/or esbuild.

I agree, although, at this point, it might be better to use a bundler that uses ESM in the final bundle like Vite, Rollup, or Snowpack. Rollup works better for libraries than Webpack, at least in my opinion.

Vite uses rollup to build and optimize static assets. Let's build our project

Many libraries support cjs/esm, such as rollup, but there are also libraries that only support esm, such as unified.js series