egoist / tsup

The simplest and fastest way to bundle your TypeScript libraries.
https://tsup.egoist.dev
MIT License
8.48k stars 209 forks source link

[Feature Request] add `.mjs` extension to esm output #1058

Open tmkx opened 6 months ago

tmkx commented 6 months ago

files:

// entry.ts
import { a } from './file'

// file.ts
export const a = 123

config:

export default defineConfig({
  entry: ['./entry.ts', './file.ts'],
  format: 'esm',
  bundle: false,
})
current output expected output
```ts // entry.mjs import { a } from "./file"; console.log(a); // file.mjs const a = 123; export { a }; ``` ```ts // entry.mjs import { a } from "./file.mjs"; console.log(a); // file.mjs const a = 123; export { a }; ```

according to the esm spec, file extensions are mandatory

Upvote & Fund

Fund with Polar

klippx commented 5 months ago

When I use tsup to build ESM I find myself grabbing for workarounds to even load (let alone run) the built ESM code, such as https://github.com/barhun/extensionless

But as a lib maintainer I can't proxy this burden to my clients, and a better workaround for me would be to patch the esm output in a postprocess somehow. But ideally tsup esm code should "just work" and no workaround should be necessary, and this issue describes exactly the behaviour I am expecting from tsup to give me for free: Correct ESM output as per the spec.

klippx commented 5 months ago

In the meantime, take a look at this repo - it is a great workaround for this issue! 🎉

https://github.com/favware/esbuild-plugin-file-path-extensions?tab=readme-ov-file#description

It provides an esbuild plugin that adds .mjs (or whatever you want) extension to relative imports in your built project. Note that you are supposed to use bundle: true which is the only weird thing going on here, but like they mention it doesn't bundle it.

belgattitude commented 5 months ago

It might be helpful:

  1. Use the tsup outExtension config.

An example here: https://github.com/belgattitude/httpx/blob/69af14514d89b7660a6f3e5e0e4494b7f4809532/packages/exception/tsup.config.mjs#L19

  1. If bundling into separate files

i tend to use the same esbuild plugin mentioned by @klippx in conjunction with outExtension.

An example here:

https://github.com/belgattitude/httpx/blob/69af14514d89b7660a6f3e5e0e4494b7f4809532/packages/assert/tsup.config.mjs#L28

Hope it helps, till mjs becomes default.

btw thx for tsup it’s really great