Add a TypeScript library to your Monorepo using TSUP

Instructor: [0:00] Let's begin by creating addlibs folder. Now, let's see the into libs. Let's create an utils folder. Let's see the into the utils folder. Let's create an empty package.json file. Let's edit that file. The first thing that we want to do is to update its name to be @monorepo/utils.

[0:26] Since we are using tsup to bundle our TypeScript code, we would need to install that tsup package first. Let's begin by running npm install tsup. Then we're going to save it as a dev dependency, and we want to save it inside the monorepo/utils package.

[0:46] Let's start by creating a tsup object inside the package.json file. We are going to set the entry point to be src/index.ts. Then we are going to configure tsup to generate the TypeScript definitions.

[1:06] We also want to generate source maps. We set this source map key to true. Then we specify the formats that we want tsup to output. This is an array that will contain ESM because we are interested in getting an ESM version of our package. We are also interested in getting a CommonJS version of our package.

[1:30] Since tsup will generate JavaScript files inside the dist folder, we will have to update the main property to dist/index.js. We will also have to add the module property to be dist/index.mjs. The last thing that we have to do here is to update the scripts object.

[1:57] We have to create two scripts. One is the dev script that is going to run tsup in watch mode. The other one is the build script which is going to run tsup.

[2:10] With that configuration in place, we want to create a new file. This file is going to be called index.ts and it will live inside the src folder. We are going to export a constant that is called copyright. Its value is going to be egghead.io.

[2:30] To recap, creating a TypeScript library inside the monorepo is easy if we use tsup. To configure tsup, we have to set up the entry point. In this case, is going to be the index.ts file inside the src directory.

[2:48] We can also specify some extra options for tsup. We can generate the types. We can generate source maps, and we can also output different formats. In this case, we want to output an ESM file and a CommonJS file.

[3:06] It is worth noting that tsup will generate those files inside the dist folder, so we have to update main and module accordingly. The last thing is that we have to create some npm scripts to make tsup work. We created a dev script that calls the tsup CLI in watch mode. We also create a build script that runs tsup.