Clever Geek Handbook

Create the latest technology library

Hello, Habr. This article is about how to write Hello world with the latest technology.







At the end, we get a hello world library which:









The beginning of time



In the new folder, initiate git and npm 







git init npm init


When setting up npm 







  package name: (bestlibever) version: (1.0.0) 0.1.0 description: Best lib forever entry point: (index.js) test command: jest git repository: keywords: author: >MAX_ (maximmasterr) license: (ISC) MIT


Project structure



The project will have the following directories:









You also need to add to .gitignore



: 







 lib/ node_modules/


Typescript



Now install and configure typescript: 







 npm i typescript -D


And create a file called tsconifg.json 









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


Now let's make the main file lying src/index.ts 









 export function helloWorld(){ return 'Hello world!' }


Also add scripts to package.json



: 







  "build": "tsc", "dev": "tsc --watch"


Now we can run a one-time build using: 







 npm run build


And reusable: 







 npm run dev


Codestyle



To test the code style, we will use tslint and prettier, as well as run this before committing.

Install tslint, prettier, husky: 







 npm i tslint tslint-config-prettier prettier husky -D


Configure prettier by creating a .prettierrc



file with the contents 







 { "printWidth": 120, "trailingComma": "none", "singleQuote": true }


Add a script to run prettier 







  "prettier": "npx prettier --write src/* test/* example/*"


Set up tslint by creating a tslint.json



file with the contents 







 { "extends": ["tslint:recommended", "tslint-config-prettier"], "rules": { "curly": false, "ordered-imports": false, "interface-name": [true, "never-prefix"] } }


Add the tslint and codestyle script: 







  "tslint": "tslint -p tslint -p tsconfig.json", "codestyle": "npm run prettier && npm run tslint"


Now let's make codestyle run before committing and add to package.json



: 







 "husky": { "hooks": { "pre-commit": "npm run codestyle" } }


Documentation



To generate web pages from md we use docsify and to generate documentation from api tsdoc







Install them 







 npm i docsify-cli typedoc -D


In the docs folder, create README.md



: 







 # Best lib ever Best lib ever `helloWorld` return `'hello world'` ## Example ``js const a = require('') console.log(a.helloWorld()) // prints 'Hello world!' ``


Also add moreExample.md





The source lies here







Next do 







 npx docsify init ./docs


Set up the sidebar in docsify by creating the sidebar.md



file 







 # Best lib ever * [Best lib ever](/) * [More examples](/moreExamples)


Now, to see all this beauty, add a script 







 "docsify": "docsify serve ./docs"


And run 







 npm run docsify


Now let's take a static method documentation

First, add a description of the function in the code: 







 /** * Returns `Hello world!` */


In .gitinore



add docs/api









Add script for typedoc 







 "typedoc": "typedoc --out ./docs/api ./src --mode file --readme docs/README.md"


Finally, add the final dock script 







 "docs": "npm run typedoc && npm run docsify"


Everything is now enough to view the docks 







 npm run docs


Tests



Install jest 







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


Create jest.config.js



config 







 module.exports = { roots: ['/src'], transform: { '^.+\\.tsx?$': 'ts-jest', }, testRegex: '(/__test__/.*|(\\.|/)(test|spec))\\.tsx?$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], }


Create a test ( test/index.ts



): 







 import { helloWorld } from "../src"; test('Should return helloWorld', () => { expect(helloWorld()).toBe('Hello world!') })


And now you can run tests on 







 npm test


Summarize



Now we can 







 npm run build #   npm run dev #    npm run codestyle #    npm run docs #   npm test #


The final github repository







More articles:


All Articles