Comparing the New Generation of Build Tools | Hacker News Reader

Comparing the New Generation of Build Tools

css-tricks.com

77 pointsmariuz20 comments

I think the headline should mention that this is only about Javascript, not build tools in general.

I've been repeating it in several threads already, and this post confirms it: if you haven't tried Vite yet, you really should. It will take 15 minutes, and if you do any Vue and/or React dev at all, it will be the best 15 minutes you ever invested in a tool.

It's fast, it works out of the box with sane default, it's fast, doc is stellar, it's fast, it support ts, jsx and sass. Also, it's really fast.

Between Vue and Vite, in 10 years Evan You is going to be known as the person who made frontend dev simple again.

(And thank you Esbuild)

This is how I feel about Svelte! If you haven’t tried Svelte with Vite yet, treat yourself to their interactive tutorial[1] and bask in its glory!

[1] https://svelte.dev/tutorial

Deno is the likely final, last stop and resting place for most anything web related to this type of tooling. It includes about anything that is the kitchen sink and swiss army knife of the space. For anyone who wants to simplify their life, this is about it. I even bought one of the Deno stuffed animals from IKEA. https://deno.land/

If you skip this article in a month or so there will be a whole new set of JS build things.

Javascript tooling is just a brutal slog to keep up with this type of stuff.

The build tool side hasn't actually seen much change in a while; babel and webpack have been dominant for years. The specific area of JS that gets tons of new entries seems to change every year or two - up until recently it was post-redux react state management libraries and tailwind-style css kits.

Has anyone found a faster way than Webpack/babel to build a react / typescript SPA that needs to stay compatible with IE11?

I've been experimenting with esbuild but it doesn't support IE11/ES5 and adding babel into the mix makes things slow and complicated again...

You could try running buble on the esbuild output, IIRC it used to be faster than babel.

You could just have a special build flag for IE11 support that does the slow path?

I've had success running swc on the output of esbuild, with a swc target of IE11. We do this only for the IE11 build. So at app startup, we check for IE11, and then load a polyfill from https://polyfill.io, and then the IE11-specific build.

The goal is to make it to September, when we have decided we can completely pull the plug on IE.

Use Vite to dev, then setup a separate webpack + babel for testing and build for prod.

More excited about the service worker based build system being developed in the emberjs ecosystem. Check it out here - https://github.com/ef4/mho

I've been using vite for building a new web app and have enjoyed the experience so far.

One thing I'd love to be able to do is to do the classic thing of rendering things mostly as html templates on server side, but serving up JS for particular page components. I also don't want to use node for SSR if at all possible, but seems to be the only route available.

That way I can easily support non-js users of the app (bing struggles to index my site at all). It used to be a lot easier to do this, but I guess it's out of vogue now!

I have exactly the same need (and problem too)! I'll monitor this thread and see if anyone else has any solutions to this.

I really would like not to have node running on my server in order to get SSR! Which effectively means I'll either have to serve entirely static pages and then hydrate them based on some model client side (which isn't server side rendering by any definition of the term), or I have to recreate the entirety of the HTML rendering functionality for my server side in my language of choice. I guess there might not be a way around the second option?

Yeah, I've had to deal with this at every js shop I work with recently, so I built this to solve the problem:

https://webrender.io/

Essentially, it's a reverse proxy that serves a cached, pre-rendered HTML version of your site to bot traffic while sending real users onward to your actual website. It works kind of like Cloudflare (which it's built on top of).

You can also hit it with an API from your end if you want to just forward bots or aren't comfortable sticking somebody else's service in front of your site.

It sounds like https://astro.build might be a good fit if you're looking to generate mostly HTML and only use JS for a few interactive components on the page. It's still very new and I haven't worked with it yet.

Can anyone recommend any resources for using something like esbuild for creating packages for publishing - in an npm or monorepo context for react typescript libraries that involves assets like inlining svgs and css?

Good article, but it would be worth mentioning IMHO that Snowpack supports webpack and esbuild (supported as the native bundler) for bundling.

Website is totally broken on firefox mobile

This quote, in particular, makes this whole article a bit hypocritical:

"In part, I think these tools are arriving as a reaction to JavaScript tooling fatigue".

So, the solution to tool fatigue is to... add more new tools?

https://xkcd.com/927/

Reply on news.ycombinator.com