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

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

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.

More Tips