Usage with TypeScript?

[mindplay-dk]

Have you managed to use this plugin with TypeScript?

I'm hoping to use Babel only for my production build, and just work with ES6 via ESBuild during development.

I'm using a setup like the following:

esbuild.build({
  entryPoints: [
    "src/foo.ts",
    "src/bar.ts",
  ],
  outdir: "dist",
  bundle: true,
  minify: true,
  sourcemap: "external",
  target: "es5",
  plugins: [
    babel({
      config: {
        plugins: [
          "@babel/plugin-syntax-typescript" // doesn't work??
        ],
        presets: [
          ['@babel/preset-env', { targets: "ie 11, not ie_mob 11" }]
        ],
      }
    })
  ]
})
  .catch(() => process.exit(1));

Because Babel (in the plugin) runs before the TypeScript transform in ESBuild itself, any TS syntax ends up going to Babel - which crashes at the first type-hint.

I could enable @babel/preset-typescript, but then the TS transform would be performed by Babel rather than ESBuild - and they might work the same, but I'm not sure I should trust it? (I'm sure it's not as fast as ESBuild either.)

I tried adding @babel/plugin-syntax-typescript to config.plugins in the plugin configuration - this should give me support for TypeScript syntax without any transformations, as far as I understand. There's no real documentation for it. But this plugin doesn't appear to pick up this option? It doesn't complain either, so there's no telling if it has seen the option or not.

I'm not sure if syntax plugins work the same way as regular plugins?

Do we need to do something to suppor them in this plugin?

How else would you be able to use this plugin with TypeScript?

[Brendan-csel]

Just ran into the same question. In my case only wanting to use Babel for the styled-components plugin ...to get support for CSS prop API. Oh the rabbit holes we go down when presented with such awesome new options as esbuild.

[rizrmd]

Just ran into the same question. In my case only wanting to use Babel for the styled-components plugin ...to get support for CSS prop API. Oh the rabbit holes we go down when presented with such awesome new options as esbuild.

Hey, I just fallen to the same rabbit hole... would you mind throwing the rope ?

[Brendan-csel]

I can't help sorry - we're the process of removing our dependency on babel and in fact styled-components altogether (moving to vanilla-extract).

[mindplay-dk]

My project is still in the early stages, so I'm making do without proper cross-browser support for now. I will probably move to a dedicated second build-step for IE11 using either rollup, parcel or webpack - as far as I can figure, esbuild can't meaningfully work together with Babel, since Babel plugins may add helpers and polyfills, some of which require bundling. Babel or ESBuild first, there's no right order, as far as I can figure - if you run Babel on the output, you have to bundle again. Seems like a dead end.