# Configure for build

To configure tsup for a build environment, execute the following steps.

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

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();

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
});

Since the predefined options for tsup already covers all the availables options, configuration transformer functions aren't as useful for a tsup configuration as for other tools like SWC or webpack. Nonetheless, they are still valuable, especially for library authors aiming to distribute a default option set that facilitates the configuration of tsup for specific functionalities of their library. Configuration transformer functions can be provided through 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.

• 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]
})

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"

To build the bundle files for production, add the following script to your project package.json file:

{
    "build": "tsup --config ./tsup.build.ts"
}

To test your new tsup configuration, open a terminal at the root of the project and execute the CLI script added previously. The build process should complete without outputting any error in the terminal and the bundle files should be available in the /dist folder (or any other outputDir you configured).