Consistently better experience than raw Esbuild

[eric-burel]

Hi,

First, I wanted to congrat @egoist on this library! I get a consistenly better experience than when using Esbuild related tools. I guess Tsup is adding relevant additional config/tooling to have a better support of various advanced use cases.

I am developing a toolkit that is a port of a Meteor framework, VulcanJS, to the broader NPM ecosystem: https://vulcan-docs.vercel.app/

I want to use the most modern tooling regarding the build, in order to use ES Modules systematically and completely drop Webpack. This means all my packages are exporting ESM, sometimes with multiple exports (client and server), and can rely on other ESM packages or CommonJS exports.

Here, I specifically needed to build an Express server written on TypeScript, and that can depend on my package library.

I'd like to share a few things I've tested, and my final workflow:

• esbuild-register despite being of the same author, did not work, for instance because of the limited ESM+CommonJS support for complicated packages like Lodash (more info)
• esbuild-node-tsc did not work. However, I stole a nifty trick for Nodemon: you can configure it to run the build step before it reloads the server. Since Tsup is dead fast, it's the best way to make build AND reload the server on file change

nodemon.json (then run nodemon app.ts to run your server):

{
  "watch": ["src"],
  "ignore": ["src/**/*.test.ts"],
  "ext": "ts,mjs,js,json,graphql",
  "exec": "tsup-node && node ./dist/app.js",
  "legacyWatch": true
}

Tsup with tsup-node worked out of the box, as soon I fixed by tsconfig to correctly handle ESM and output ES2020 code. Here is my package.json setup:

  "scripts": {
    "start": "node ./dist/app.js",
    "dev": "nodemon",
    "transpile": "tsc # Beware, this won't resolve local dependencies (missing .js)",
    "build:tsup": "tsup-node",
    "build": "yarn run build:tsup"
  },

If it can help, here are also the tsconfig:

{
  //"extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist",
    "module": "ES2020",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strictNullChecks": true,
  },
  "include": [
    "./src/app.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

and the tsup.config.ts:

import { defineConfig } from "tsup";
import path from "path";

const commonConfig = {
  clean: true,
  splitting: false,
  // Skip until .d.ts.map is also supported https://github.com/egoist/tsup/issues/564
  // dts: true,
  sourcemap: true,
  tsconfig: path.resolve(__dirname, "./tsconfig.json"),
};
export default defineConfig([
  {
    entry: ["./src/app.ts"],
    ...commonConfig,
    format: ["esm"],
    outDir: "dist",
  },
]);

[rxliuli]

Yes, I had built a simple esbuild based bundler for bundling lib/cli on my own before this, but ended up using existing tools. currently

• tsx: run any code, even if it contains cjs/esm mix
• tsup: the easiest way to build a ts library, but when things get more complicated I'll use vite