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

This content originally appeared on DEV Community and was authored by Siddharth

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

Initialise Git

   git init

Write a .gitignore

   node_modules/

   # Build files
   lib/

Initialise npm

   npm init

Install TypeScript

   npm install --save-dev typescript

Create a tsconfig.json

   {
       "compilerOptions": {
           "target": "es5",
           "module": "commonjs",
           "declaration": true,
           "outDir": "./lib",
           "strict": true,
           "esModuleInterop"
       },
       "include": ["src"],
       "exclude": ["node_modules", "**/__tests__/*"]
   }

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"
       }
       // ...
   }

Build your code

   npm run build

Initialise XO

  npm init xo

Add your lint script in package.json

   {
      // ...
       "scripts": {
           "build": "tsc",
           "lint": "xo --fix",
           "test": "echo 'error no test specified' && exit 0"
       }
       // ...
   }

Lint your code

   npm run lint

Add the files property in your package.json

   {
       // ...
       // Whitelisting is better than blacklisting everything
       "files": [
           "lib/**/*"
       ],
       // ...
   }

Install Jest

   npm install --save-dev jest ts-jest @types/jest

Create a jestconfig.json

   {
      "transform": {
          "^.+\\.(t|j)sx?$": "ts-jest"
      },
      "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
      "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"]
   }

Add your test script in package.json

   {
       // ...
       "scripts": {
           "build": "tsc",
           "lint": "xo --fix",
           "test": "jest --config jestconfig.json"
       }
       // ...
   }

Write tests in src/__test__/
Run tests

   npm run test

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 
       }
       // ...
   }

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!

This content originally appeared on DEV Community and was authored by Siddharth

Print Share Comment Cite Upload Translate Updates

APA

Siddharth | Sciencx (2021-05-19T09:56:19+00:00) How to build an npm package using TypeScript, Jest, and XO. Retrieved from https://www.scien.cx/2021/05/19/how-to-build-an-npm-package-using-typescript-jest-and-xo/

MLA

" » How to build an npm package using TypeScript, Jest, and XO." Siddharth | Sciencx - Wednesday May 19, 2021, https://www.scien.cx/2021/05/19/how-to-build-an-npm-package-using-typescript-jest-and-xo/

HARVARD

Siddharth | Sciencx Wednesday May 19, 2021 » How to build an npm package using TypeScript, Jest, and XO., viewed ,<https://www.scien.cx/2021/05/19/how-to-build-an-npm-package-using-typescript-jest-and-xo/>

VANCOUVER

Siddharth | Sciencx - » How to build an npm package using TypeScript, Jest, and XO. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/19/how-to-build-an-npm-package-using-typescript-jest-and-xo/

CHICAGO

" » How to build an npm package using TypeScript, Jest, and XO." Siddharth | Sciencx - Accessed . https://www.scien.cx/2021/05/19/how-to-build-an-npm-package-using-typescript-jest-and-xo/

IEEE

" » How to build an npm package using TypeScript, Jest, and XO." Siddharth | Sciencx [Online]. Available: https://www.scien.cx/2021/05/19/how-to-build-an-npm-package-using-typescript-jest-and-xo/. [Accessed: ]

rf:citation

» How to build an npm package using TypeScript, Jest, and XO | Siddharth | Sciencx | https://www.scien.cx/2021/05/19/how-to-build-an-npm-package-using-typescript-jest-and-xo/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts