Microbundle VS parcel

For package authoring - microbundle is a handy boilerplate (I would avoid tsdx personally - it’s basically been abandoned for turborepo but that’s not apparent at first glance).

My tech stack was React + Typescript, Storybook for docs, vite.js for build instead of webpack, microbundle for bundling (basically a no-config rollup wrapper), and Google's release please bot for handling release/deployment.

Setting up a modern Typescript or Javascript development stack is a daunting task, there are a lot of moving parts, and sometimes the whole process seems like magic, so I switched to Microbundle. While microbundle handles the compilation, there are a lot of other moving parts that need to be set up to start developing with Nodejs/Typescript (CI, tests, linting, etc). So I've created an opinionated template repository with Typescript, Microbundle, Jest, eslint, husky, prettier, github actions, pnpm, and a bunch of other scripts. It enables me to start developing a library immediately by using the repository as a starter template. Let me know what you think and if some processes could be improved, or some valuable tools that could be added. Pull requests and suggestions are welcomed.

I would recommend starting by using https://github.com/developit/microbundle , as it has pretty good default behavior for generating library output.

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

It's a React application written in TypeScript using Parcel.

- Data export.

Feel free to leave feedback here or on GitHub[3]. Perhaps it could be helpful to you as well. Cheers!

1. https://parceljs.org/

A bundler lets you write modular code and bundle it together into small packages to optimize load time. Popular bundlers: webpack, Parcel, esbuild, swc.

Most front-end frameworks nowadays include these features as part of their CLI’s such as Create React App, Angular’s ng-cli, etc. For those that don’t, many will use a combination of some type of bundler like Parcel, Rollup, or Webpack and a browser refresher like livereload. This enables you to write code, save it, and immediately see the results. This in turn leads to fast feedback as you iterate all day in this build loop. The native Elm Reactor doesn’t offer this ability and elm-live fits the bill as a small Node.js library to enable this.

Parcel

First of all, you’ll notice that Parcel always places your bundled scripts and stylesheets in the same directory as the entry point HTML files. This happens even if you have your CSS and JavaScript files in separate folders. Since these are production files, it might not matter much. But it’s something to keep in mind. The good news is this seems to have been corrected in the upcoming Parcel version 2 (still in Alpha). So there should be a way to override this behavior when that version of Parcel is stable (the current stable version is 1.12.4).

Webpack is the most popular bundler and it followed on the heels of Require.js, Rollup, and similar solutions. But the learning curve for a tool like webpack is steep. Getting started with webpack isn’t easy due to its complex configurations. As a result, in recent years another solution has emerged. This tool is not necessarily a front-runner, but an easier-to-digest alternative on the front-end module bundler landscape. Introducing Parcel.js.

After years of configuring webpack for various projects I have finally decided to migrate all my projects to Parcel[1] manly because I got tired of creating and maintaining hundreds of lines of webpack.config.js files, I wanted something that just works. I am really happy with that decision.

Parcel is plenty fast and is pretty much zero config, I can use it to build libraries[2] as well as applications[3] for the browser and node.

I am manly building client side react applications, so your mileage may vary.

[1] https://parceljs.org/

[2] https://parceljs.org/getting-started/library/

[3] https://parceljs.org/getting-started/webapp/

> I just wanna `script/build` or `yarn dev` and not think about it anymore.

Parcel might be a good fit for you: https://parceljs.org/

Have a go at petswitch.com if you wish... I made the original Petswitch almost ten years ago, and it's had mild success since then, including CNET writing an article about it and it receiving the prestigious honour of 'most useless website' in week 41 of 2018, as determined by theuselesswebindex.com. Aside from the obvious question of why I even made this, it was getting pretty creaky – I originally built it with PHP and ImageMagick, with the facial features being manually selected via jQuery UI. So I decided to rebuild the whole thing with a full face-to-pet ML pipeline, on static hosting. To get the human face features, the app renders the upload to a temporary img element. This is a handy way to orient the image correctly via the browser, and saves having to deal with EXIF data. It's then resized, rendered to a canvas element, converted to a base64 string, then sent via fetch to Google's Cloud Vision API, which returns landmark coordinates of the face. I use these coordinates to correct any tilt on the face, mask the eyes and mouth via a mask image, then store each masked element as an additional canvas. Detecting pet faces was trickier. Google, Amazon and Microsoft all offer object detection APIs via transfer learning, and the approach is largely the same: you supply a series of images with bounding boxes around the objects you want to detect, either added via a web interface or uploaded via their API. You train a model online from these supplied images, then the service will return the estimated coordinates of any detected objects in an uploaded image. I found a dataset of both cats and dogs that had been labelled with landmarks on their faces, then wrote a script to convert the landmarks into bounding boxes around their eyes and nose, the dimensions based on a simple formula around the distance between the eyes in each image. All in all it's been trained on about 17,000 images of cats and dogs, and the accuracy seems to be pretty good. I was pleased to discover it actually works pretty well on other pets too. I've also added some friendly pets to the Petswitch family for those that don't have a pet on hand. I decided not to use a framework for this, it's written from scratch using a series of ES6 modules – although I did use Konva to handle the manual selection of facial features if the API can't detect a face. I used ParcelJS as my task runner, and my detection APIs are hosted on Firebase Cloud Functions. Let me know if you have any questions, although I can offer no good explanation for why I created this monstrosity...