how to keep original directory structure？

src
  - tool1
    - tool1.ts
  - tool2
    - tool2.ts
  - tool3
    - tool3.ts
  - index.ts

Such as above, src/index.ts is exports all, then use tsup src/index.ts --format esm,cjs,iife build,it will output:

dist
  - index.mjs
  - index.global.js
  - index.js

it not I want.

[daolou]

Just to answer this precise question:

outDir: "./dist",
 esbuildOptions(options, context) {
    // the directory structure will be the same as the source
    options.outbase = "./";
    },
  },

The “outbase” option of esbuild will force the bundled files to have the same directory structure as the source.

I’ve updated my Stack Overflow answer here: https://stackoverflow.com/a/73883783/5513532

At this point I am stuck with one last thing, I need to add “.js” to the imports of “index.ts” and can’t find a way to do that during bundling. So I add the “.js” manually in the “index.ts” source (sounds weird, but it works), except that now it breaks storybook.

use bundle: false and entry: ['./src/**/*.ts'] also work, but I have another problem: compilerOptions.paths not resolved

[eric-burel]

Maybe to elaborate, this seems appropriate when building libraries of React component or libraries of independant utilities (lodash style), see: https://stackoverflow.com/questions/72149666/a-fool-proof-tsup-config-for-a-react-component-library In this case you want to generate one .js per component.

We seem to need:

• globs to bundle all components, with code-splitting to favour code reuse accross components
• for the “index.ts” that imports them and serves as the package entrypoint, we’d want to avoid bundling. This index should really be a map towards the bundled, independant components. Probably calling just Esbuild without bundle option may be easier. You can use bundle: false to disable bundling and keep only the transpiling step.

I still struggle to keep the directory structure. If entry is ["index.ts", "./smth/nested.ts"], the smth folder will be created. But this is probably not what you want since you need no bundling for index, and bundling for “nested”. If entry is ["./smth/nested.ts"] it won’t respect the directory structure.

Edit: here is the final result. Components are bundled with code splitting (in case 2 components use the same internal sub component for instance), index files are not bundled, only transpiled, and uses an explicit “.js” which is necessary for ESM modules to work. I am surprised that the “.js” extension is accepted by TypeScript, but it works. Named import works as expected, and tree shaking is now possible because each component leaves in an isolated ES module. This is not perfect but a good first step.