What's the best approach to get all bundled files inside the same folder?

[andyjessop]

EDIT: Answered below

Let's say I have a folder structure like this:

- apps
  - my-app
     - src
        entry.ts <-- this dynamically imports first-package and second-package
     build.ts
     package.json 
- packages
   - first-package
        first.ts
   - second-package
        second.ts

And in my build.ts, I have:

await Bun.build({
    entrypoints: ['./src/entry.ts'],
    naming: '[dir]/[name].[hash].[ext]',
    outDir: './dist'
    splitting: true,
  });

This is going to output something like:

- apps
  - my-app
     - dist
          entry.123456.js
     - src
          index.ts <-- this dynamically imports first-package and second-package
     build.ts
     package.json 
- packages
   - first-package
        first.ts
        first.123456.js <-- added here instead of in ./dist
   - second-package
        second.ts
        second.123456.js <-- added here instead of in ./dist

But that's not quite what I want, because I can't just deploy the dist folder now, as the file imports are all relative. What I want is this:

- apps
  - my-app
     - dist
          entry.123456.js
          first.123456.js
          second.123456.js
     - src
          index.ts <-- this dynamically imports first-package and second-package
     build.ts
     package.json 
- packages
   - first-package
        first.ts
   - second-package
        second.ts

With the imports rewritten to be relative to the dist folder.

What is the best approach for this? Do I need a plugin? If so, can you recommend any plugin hooks and how to use them?

[andyjessop]

The solution is simply not to use [dir] in the naming. By using naming: '[name].[hash].[ext]' it produces a flat output.