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.
More Tips
Type Predicates
1 min
TypeScript 5.1 Beta is OUT!
2 mins
How to Name your Types
4 mins
Don't use return types, unless...
4 mins
TypeScript 5.0 Beta Deep Dive
6 mins
Conform a Derived Type Without Losing Its Literal Values
1 min
Avoid unexpected behavior of React’s useState
1 min
Understand assignability in TypeScript
2 mins
Compare function overloads and generics
1 min
Use infer in combination with string literals to manipulate keys of objects
1 min
Access deeper parts of objects and arrays
1 min
Ensure that all call sites must be given value
1 min
Understand how TypeScript infers literal types
1 min
Use assertion functions inside classes
1 min
Assign local variables to default generic slots to dry up your code and improve performance
2 mins
Know when to use generics
2 mins
Map over a union type
1 min
Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig
1 min
Use generics to dynamically specify the number, and type, of arguments to functions
1 min
Use 'declare global' to allow types to cross module boundaries
2 mins
Turn a module into a type
2 mins
Create autocomplete helper which allows for arbitrary values
2 mins
Use deep partials to help with mocking an entity
1 min
Throw detailed error messages for type checks
1 min
Create a 'key remover' function which can process any generic object
1 min
Use generics in React to make dynamic and flexible components
1 min
Create your own 'objectKeys' function using generics and the 'keyof' operator
1 min
Write your own 'PropsFrom' helper to extract props from any React component
1 min
Use 'extends' keyword to narrow the value of a generic
1 min
Use function overloads and generics to type a compose function
2 mins
Decode URL search params at the type level with ts-toolbelt
2 mins
Use 'in' operator to transform a union to another union
2 mins
Derive a union type from an object
2 mins