# Configure for development

To configure tsup for a development 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.dev.ts at the root of the project:

web-project
├── src
├──── ...
├── package.json
├── tsup.dev.ts

Then, open the newly created file and export the tsup configuration by using the defineDevConfig(options) function:

import { defineDevConfig } from "@workleap/tsup-configs";

export default defineDevConfig();

The defineDevConfig(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 { defineDevConfig } from "@workleap/tsup-configs";

export default defineDevConfig({
    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 defineDevConfig function.

To view the default development configuration of @workleap/tsup-configs, have a look at the dev.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 { defineDevConfig } from "@workleap/tsup-configs";
import { myCustomTsupTransformer } from "@my-library/myCustomTsupTransformer";

export default defineDevConfig({
    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 transformer: TsupConfigTransformer = (config: TsupConfig, context: TsupConfigTransformerContext) => {
    if (context.environment === "dev") {
        config.watch = false;
    }

    config.dts = false;
    config.entry = ["./src/my-library"],
    config.outDir = ["./dist/my-library"],

    return config;
};

• environment: "dev" | "build"

To initiate the development process, add the following script to your project package.json file:

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

To test your new tsup configuration, open a terminal at the root of the project and execute the CLI script added previously. A development process should start without outputting any error in the terminal.