how to keep original directory structure？

[daolou]

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.

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.

[oliveiraantoniocc]

Maybe you meant about the legacy output modifier. If not, what would be the expected output?

[daolou]

I want is code split,like this:

dist
  - tool1
    - tool1.js
    - tool1.mjs
  - tool2
    - tool2.js
    - tool2.mjs
  - tool3
    - tool3.js
    - tool3.mjs
  - index.js
  - index.mjs

[jimmy-guzman]

An approach I take to achieve something similar is to set up entry with a glob that would output an array of files, for example

import glob from 'tiny-glob'
import { defineConfig } from 'tsup'

export default defineConfig(async () => {
  return [
    {
      entry: await glob('./src/**/!(*.d|*.spec).ts'),

[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.

[daolou]

An approach I take to achieve something similar is to set up entry with a glob that would output an array of files, for example

import glob from 'tiny-glob'
import { defineConfig } from 'tsup'

export default defineConfig(async () => {
  return [
    {
      entry: await glob('./src/**/!(*.d|*.spec).ts'),

It's entry seem support glob:

export default defineConfig([
  {
    entry: ['src/**/*.ts'],
    splitting: true,
    target: 'es5',
    format: 'cjs',
    dts: true,
    treeshake: true,
    bundle: false,
  }
]);

[eric-burel]

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.

[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

[daolou]

BTW

if use options.outbase = "./";, it maybe affect esbuild-plugins that use build.onResolve;

[aleclarson]

One drawback to using globs in entry is that new files aren't picked up, so you have to restart tsup whenever adding a new file that matches one of the globs in entry.

#748

[cenk1cenk2]

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

Have you got a change to find a solution to compilerOptions.paths not being resolved, I have tried a couple of esbuild plugins to temporary fix but to no avail. For DTS part of the application it seems to resolve quite fine, but JavaScript part as you indicate is not resolved.

I guess this behavior is caused by esbuild not following any paths in the tsconfig when the bundling options is off.

[MrKou47]

I scoured the documentation and couldn't find the bundle: false option. In my case, I just want to replace tsc with tsup cause tsc is too slow. Maybe we should add a section about bundle option to documentation?

[cenk1cenk2]

For anybody stumbling accross the issue I ended up combining what I usually use for tsc.

Setting bundle to false as expected stops following paths on esbuild side of things. I suppose this would not be a concern of tsup. From the esbuild side I could not make it work using alias plugins and injecting tsconfig in.

So just used tsconfig-replace-paths cli to swap paths on onsuccess step. It is still fast and stable enough for me so that I prefer not to mark it as being a trade off.

Something like as below:

https://github.com/tailoredmedia/backend-nx-skeleton/blob/master/packages/nx-nest/tsup.config.ts

[LennardWesterveld]

Are you guys also having the issue that it gives the error on the first line No input files, try "tsup <your-file>" instead? Getting stuck on this piece of code: https://github.com/egoist/tsup/blob/main/src/index.ts#L77-L79 while I just have the config

  { 
       bundle: false,
       entry: ['src/**/*.{ts,tsx}', '!src/**/*.stories.{ts,tsx}', '!src/**/*.d.{ts,tsx}'],
   }

[mxvsh]

tried all, none of them worked 😢

[eddienubes]

I was trying to build a node library to use in both CJS and ESM environments and figured it out with

tsup ./src --format cjs,esm --no-splitting --dts --tsconfig tsconfig.build.json

to:

• Preserve folder structure (./src vs ./src/index.ts)
• Build to multiple formats (cjs, esm)
• Disable esbuild's code splitting (--no-splitting)
• Generate .d.ts files for library consumers
• Provide custom tsconfig file (--tsconfig)

Hope it helps someone :)

[retrouser955]

I was trying to build a Discord bot and changing entry from entry: ['src/index.ts'] to entry: ['src/**/*'] worked. I hope this helps.

[Lordfirespeed]

Interestingly, using the glob pattern src/**/* works fine with a structure like this:

./src
├── index.ts
└── types
    ├── application.ts
    └── new-file.ts

Yields

./dist
├── index.js
└── types
    ├── application.js
    └── new-file.js

But when the src directory has no top-level files, a nesting level is omitted:

./src
└── types
    ├── application.ts
    └── new-file.ts

Yields

./dist
├── application.js
└── new-file.js

Perhaps I should create a new issue for this, though. It may even be an esbuild problem.

[mamlzy]

Sorry for tagging @egoist, could you tell us why it happens that way? #728 (comment)

[Lordfirespeed]

Sorry for tagging @egoist, could you tell us why it happens that way? #728 (comment)

@mamlzy making an educated guess, tsup/esbuild (I do not know which is responsible) chooses the 'deepest common ancestor' (directory) for all the discovered input entrypoints and computes their paths relative to this directory.
Then the output paths for each entrypoint are computed as dist/[relative path] (assuming dist is your chosen output folder name).

With an index.ts, the deepest common ancestor is src and all is good. Actually, any source file in the src folder, or even a directory alongside types containing source files, will do the trick.

When index.ts is missing, the deepest common ancestor becomes src/types and this leads to the missing directory level.