#
Configure for build
To configure tsup for a build environment, execute the following steps 👇
#
Install the packages
Open a terminal at the root of the project and install the following packages:
pnpm add -D @workleap/tsup-configs tsup typescript
yarn add -D @workleap/tsup-configs tsup typescript
npm install -D @workleap/tsup-configs tsup typescript
#
Configure tsup
First, create a configuration file named tsup.build.ts
at the root of the project:
web-project
βββ src
βββββ ...
βββ package.json
βββ tsup.build.ts
Then, open the newly created file and export the tsup configuration by using the defineBuildConfig(options)
function:
import { defineBuildConfig } from "@workleap/tsup-configs";
export default defineBuildConfig();
#
Use predefined options
The defineBuildConfig(options)
function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accepts any tsup options, no locked in ❤️✌️:
import { defineBuildConfig } from "@workleap/tsup-configs";
export default defineBuildConfig({
dts: false
});
#
Configuration transformers
We do not guarantee that your configuration transformers won't break after an update. It's your responsibility to keep them up to date with new releases.
Since the transformers
option of the defineBuildConfig
function.
To view the default build configuration of @workleap/tsup-configs
, have a look at the build.ts configuration file on GitHub.
#
transformers
- Type:
((config: TsupConfig, context: TsupConfigTransformerContext) => TsupConfig)[]
- Default:
[]
import { type TsupConfigTransformer, type TsupConfig } from "@workleap/tsup-configs";
export const myCustomTsupTransformer: TsupConfigTransformer = (config: TsupConfig) => {
config.dts = false;
config.entry = ["./src/my-library"],
config.outDir = ["./dist/my-library"],
return config;
};
import { defineBuildConfig } from "@workleap/tsup-configs";
import { myCustomTsupTransformer } from "@my-library/myCustomTsupTransformer";
export default defineBuildConfig({
transformers: [myCustomTsupTransformer]
})
#
Execution context
Generic transformers can use the context
parameter to gather additional information about their execution context, like the environment
they are operating in:
import type { TsupConfigTransformer, TsupConfigTransformerContext, TsupConfig } from "@workleap/tsup-configs";
export const myCustomTsupTransformer: TsupConfigTransformer = (config: TsupConfig, context: TsupConfigTransformerContext) => {
if (context.environment === "build") {
config.clean = false;
}
config.dts = false;
config.entry = ["./src/my-library"],
config.outDir = ["./dist/my-library"],
return config;
};
environment
:"dev" | "build"
#
Add a CLI script
To build the bundle files for production, add the following script to your project package.json
file:
{
"build": "tsup --config ./tsup.build.ts"
}
#
Try it 🚀
To test your new tsup configuration, open a terminal at the root of the project and execute the /dist
folder (or any other outputDir
you configured).