Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 19, 2021 09:56 am GMT

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

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!

Original Link: https://dev.to/siddharthshyniben/how-to-build-an-npm-package-using-typescript-jest-and-xo-40nd

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To