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:
- Uses typescript
- Takes care of codestyle
- Generates a dock
- Conducts tests
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:
- src - Here will be the files of the library itself (typescript)
- lib - Here tsc will put the compiled files from src
- test - Here are the tests
- examples - Usage examples
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:
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
The final github repository