Hacker News Reader

Comment by samhuk | Hacker News Reader

From my experience working with esbuild since it's early days, all I can say is to that there has been a very high bar set by esbuild's speed and ease-of-use. I've used it for all my web apps and services since and i've finally begun to like my front-end build chain, unbelievably.

View on HN

Yeah, as someone who focuses primarily on back-end but occasionally finds the need to dive into front-end, esbuild has virtually eliminated the pain I had with front-end bundling/packaging when I was using Webpack. At least it has in my situation, which involves mostly standard needs and very little customization.

esbuild shines even brighter when you do need to customize. The API is outstanding. Docs are excellent. I've been able to do most things myself, without hunting for plugins and examples.

Just migrated one of our projects from webpack+babel+tsc to just webpack with esbuild-loader, the difference is astounding. Just need to remove webpack itself now so we can use their transforms.

Doesn't esbuild skip Typescript type checking? https://esbuild.github.io/content-types/#typescript

You'll still need to keep tsc around for that, though perhaps you're doing that with another step in Webpack...?

During hour to hour development, I just let Visual Studio tell me about the errors as they come up. On the rare occasions I don't already have the editor open before deploying, I have a shell script to kick off the right tsc invocation. Otherwise, bundling plus uploading to the server is just another shell script. Yes, a full type check from scratch is slow, but it doesn't come up that often.

To anyone who wants to do this:

Let's say you have a tsconfig.json. Create a tsconfig-test.json like this:

    {
        "compilerOptions": {
            "noEmit": true,
            "skipLibCheck": true
        },
        "extends": "./tsconfig.json",
        "include": ["./\*/*.ts", "./\*/*.d.ts"]
    }

Add a script to your package.json (I use "test-types")

    ...
        "scripts": {
            "test-types": "tsc --project ./tsconfig-test.json",
    ...

Then you can "yarn test-types" quickly. I use husky[1] to run that command as a git pre-commit hook. My team cannot commit Typescript errors. Additionally I have a strict tsconfig and a strict eslint config (with these plugins:sonarjs, @typescript-eslint, simple-import-sort) which prevents "any" types and bad typescript hygiene. Results in faster code reviews.

[1] https://www.npmjs.com/package/husky

You don’t need webpack to run tsc. You can treat typescript as a linter and run it seperately (it also has a fast watch mode)

Parent comment said they went from "webpack+babel+tsc" to "webpack with esbuild-loader"

The lack of tsc in the new process made me wonder if it just got added to Webpack

It does, but esbuild helps with hot-reloading speed.

You just have your tsc compile as a pre-commit git hook and CI pipeline step.

This. esbuild has been amazing. Can never work without it. The only thing missing is a "vendor" kind of bundle. I wish i could specify dependencies and own code in two separate bindles. As the other wont change much, and could be cached.

esbuild is great, but our only blocker for using it was that there was no way to control the number of chunks. On a moderately sized modular app, this can slow down things significantly[0]

[0] https://github.com/evanw/esbuild/issues/2317

Have you tried vite? Its been a similiar experience for me

Same here!

Reply on news.ycombinator.com