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.

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.

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

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

And now we run this:

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.

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:

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

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

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.

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.

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.

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.

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