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 to true

• declarationDir set to ./types

• importHelpers set to true

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.