Implementing build step with TypeScript
Implementing the build step with TypeScript is pretty simple too, as we already have TypeScript working for us.
First we need to create tsconfig-cjs.json
to use it to compile CommonJS modules. Its contents will look like this:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs",
"outDir": "./cjs",
"declarations": true
}
}
In our main tsconfig.json
we need to make sure we have the following settings:
outDir
set to./esm
declarations
set totrue
declarationDir
set to./types
importHelpers
set totrue
While three of those are pretty self-explanatory, importHelpers
may need some explanation.
When modern and fancy syntax is compiled to an older, compatible version of JS syntax, TypeScript generates a lot of helpers code that it puts alongside each file that needs it. But if you have numerous files these helpers get duplicated multiple times, creating a lot of useless code that can be easily reused. To optimize that, there is a module named tslib
that consists of all the runtime helpers that TypeScript generates. The flag importHelpers
in tsconfig
imports these helpers from tslib
package, instead of generating them inline.
This page is a preview of The newline Guide to Creating a React Hooks Library