Get a TypeScript package ready for release to NPM in under 2 minutes

If you're thinking of deploying a TypeScript package to NPM, you should be considering Preconstruct. It's incredibly easy to set up and it handles so many things for you.

Let's get started. We have a simple index source file, which just is inside src.


export const hello = () => {}

And we've got our package.json here, which has a basic name, "matt-preconstruct-example". This is not set up at all for deploying to NPM.


{
  "name": "matt-preconstruct-example",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Matt Pocock",
  "license": "MIT",
  "devDependencies": {
    "typescript": "^4.6.4"
  }
}

Let's see how quick it can go. Run the following command in your terminal.


yarn add -D @preconstruct/cli

This is going to install a CLI that handles our building along with a bunch of other stuff.

And now we run this:


yarn preconstruct fix

And Preconstruct is there because we've installed the CLI. You'll notice here in our package.json, that it's added dist/matt-preconstruct-example.cjs.js into our main.


{
  "name": "matt-preconstruct-example",
  "version": "1.0.0",
  "main": "dist/matt-preconstruct-example.cjs.js",
  "author": "Matt Pocock",
  "license": "MIT",
  "devDependencies": {
    "@preconstruct/cli": "^2.1.5",
    "typescript": "^4.6.4"
  }
}

So we don't even need to think about our main. If we want to add bundling for ESM, we can just add "module": true, and run yarn preconstruct fix again, and it will go in and add the ESM version.

Now we can run the following:


yarn preconstruct build

While this is running I'll go ahead and add that build command to my scripts in my package.json


{
  "name": "matt-preconstruct-example",
  "version": "1.0.0",
  "main": "dist/matt-preconstruct-example.cjs.js",
  "author": "Matt Pocock",
  "license": "MIT",
  "scripts": {
    "build": "yarn preconstruct build"
  },
  "devDependencies": {
    "@preconstruct/cli": "^2.1.5",
    "typescript": "^4.6.4"
  }
}

And now we've got a dist file with all of the correct stuff in there. We can just ignore it for now.

And we've got cgs.d.ts. We've got all of our declaration files properly exported. We've got everything working for ESM as well if we want it. It just gives you everything out of the box.

And from here, you could just run yarn publish or npm publish, send this up to the cloud, and it'll be ready for you to use in any of your apps.

Transcript

0:00 If you are thinking of deploying a time script package to NPM, you should be considering preconstruct. It's incredibly easy to set up and it handles so many things for you. Let's get started. We have a simple index source file here, which just is inside SRC, we've got our package here, and we've got a basic name, map preconstruct example. [0:20 [0: 20] This is not set up at all for deploying to NPM and you see how quick it can go. We can go yarn add, as a devDependency, @preconstruct/cli. This is going to install a CLI, which handles all of our building, handles a lot of our other stuff too.

0:37 Now we can run yarn preconstruct fix. Preconstruct is there because we've installed the CLI. You'll notice here that it's added dist/matt-preconstruct-example.cjs.js into our main. We don't even need to think about our main.

0:52 If we want to add bundling for ESM, we just add "module" true, run yarn preconstruct fix again, and it'll go in and add the ESM version. Now we can run yarn preconstruct build. I'm just going to, while this is running, just going to add this into a script, into my MPM as well. We've got build yarn preconstruct build.

1:16 Now we've got a dist file with all of the correct stuff in there. I'm just going to gitignore it, actually. We've got cjs.d.ts. We've got all of our declaration files properly exported. We've got everything working for ESM as well if we want it. It just gives you everything out of the box.

1:35 From here, I could just run yarn publish, or NPM publish and send this up to the cloud and it's ready for you to use in any of your apps.

If you're thinking about putting a TypeScript package up to NPM, you should be considering preconstruct. It makes setup EXTREMELY easy and takes many decisions out of your hands.

Here, we get a package ready for release in under 2 minutes.

Discuss on Twitter

More Tips

Derive a union type from an object

Use 'in' operator to transform a union to another union

Decode URL search params at the type level with ts-toolbelt

Use function overloads and generics to type a compose function

Use 'extends' keyword to narrow the value of a generic

Write your own 'PropsFrom' helper to extract props from any React component

Create your own 'objectKeys' function using generics and the 'keyof' operator

Use generics in React to make dynamic and flexible components

Create a 'key remover' function which can process any generic object

Throw detailed error messages for type checks

Use deep partials to help with mocking an entity

Create autocomplete helper which allows for arbitrary values

Turn a module into a type

Use 'declare global' to allow types to cross module boundaries

Use generics to dynamically specify the number, and type, of arguments to functions

Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig

Map over a union type

Know when to use generics

Assign local variables to default generic slots to dry up your code and improve performance

Use assertion functions inside classes

Understand how TypeScript infers literal types

Ensure that all call sites must be given value

Access deeper parts of objects and arrays

Use infer in combination with string literals to manipulate keys of objects

Compare function overloads and generics

Understand assignability in TypeScript

Avoid unexpected behavior of React’s useState

Conform a Derived Type Without Losing Its Literal Values

TypeScript 5.0 Beta Deep Dive

Don't use return types, unless...

How to Name your Types

TypeScript 5.1 Beta is OUT!

Type Predicates