How to build an npm package using TypeScript, Jest, and XO

Siddharth - May 19 '21 - - Dev Community

This is not an article which describes the steps in detail or describes why you need to use TypeScript, Jest, or XO; It is just meant to be a cheatsheet based on my experience which helps to get things done quickly. Also note that this does not include any steps on creating READMEs and related files.

Enough talk, let's start!

  • Create a folder
   mkdir project-name && cd project-name
Enter fullscreen mode Exit fullscreen mode
  • Initialise Git
   git init
Enter fullscreen mode Exit fullscreen mode
  • Write a .gitignore
   node_modules/

   # Build files
   lib/
Enter fullscreen mode Exit fullscreen mode
  • Initialise npm
   npm init
Enter fullscreen mode Exit fullscreen mode
  • Install TypeScript
   npm install --save-dev typescript
Enter fullscreen mode Exit fullscreen mode
  • Create a tsconfig.json
   {
       "compilerOptions": {
           "target": "es5",
           "module": "commonjs",
           "declaration": true,
           "outDir": "./lib",
           "strict": true,
           "esModuleInterop": true
       },
       "include": ["src"],
       "exclude": ["node_modules", "**/__tests__/*"]
   }
Enter fullscreen mode Exit fullscreen mode
  • Write your code in src/index.ts
  • Add your build script in package.json
   {
       // ...
       "scripts": {
           "build": "tsc",
           "test": "echo 'error no test specified' && exit 0"
       }
       // ...
   }
Enter fullscreen mode Exit fullscreen mode
  • Build your code
   npm run build
Enter fullscreen mode Exit fullscreen mode
  • Initialise XO
  npm i -g xo # If you haven't already

  npm init xo
Enter fullscreen mode Exit fullscreen mode
  • Add your lint script in package.json
   {
      // ...
       "scripts": {
           "build": "tsc",
           "lint": "xo --fix",
           "test": "echo 'error no test specified' && exit 0"
       }
       // ...
   }
Enter fullscreen mode Exit fullscreen mode
  • Lint your code
   npm run lint
Enter fullscreen mode Exit fullscreen mode
  • Add the files property in your package.json
   {
       // ...
       // Whitelisting is better than blacklisting everything
       "files": [
           "lib/**/*"
       ],
       // ...
   }
Enter fullscreen mode Exit fullscreen mode
  • Install Jest
   npm install --save-dev jest ts-jest @types/jest
Enter fullscreen mode Exit fullscreen mode
  • Create a jestconfig.json
   {
      "transform": {
          "^.+\\.(t|j)sx?$": "ts-jest"
      },
      "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
      "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"]
   }
Enter fullscreen mode Exit fullscreen mode
  • Add your test script in package.json
   {
       // ...
       "scripts": {
           "build": "tsc",
           "lint": "xo --fix",
           "test": "jest --config jestconfig.json"
       }
       // ...
   }
Enter fullscreen mode Exit fullscreen mode
  • Write tests in src/__test__/
  • Run tests
   npm run test
Enter fullscreen mode Exit fullscreen mode
  • Add some more scripts
   {
       // ...
       "scripts": {
           // Previous ones...
           "prepare" : "npm run build",
           "prepublishOnly" : "npm run test && npm run lint",
           "preversion" : "npm run lint",
           // You could also add "version" and "preversion" scripts to push to github, but I prefer doing it manually 
       }
       // ...
   }
Enter fullscreen mode Exit fullscreen mode
  • Update your package.json file with proper entries
    • Don't forget to set main to lib/index.js
    • Update all other things as necessary.
  • Commit all changes
  • Publish
  • Repeat!
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .