Welcome to Tencent Cloud + community, get more Tencent mass technology practice dry goods oh ~

This article was published by Xiaoming Plus

Many times, we might want to create modules in typescript and submit them to NPM for others to use,

So what steps do I need to take if I want to initialize such a module in 2018? :

The answer is: Creating an elegant, developer-friendly module requires at least the following 15 steps

  1. Initialize folders, initialize git repositories, initialize NPM, initialize TSC
  2. Modify tsconfig.js configuration
  3. Add the NPM script
  4. Add tsLint verification code rules and EditorConfig,prettier to unify code styles
  5. Set the verification hooks that Git submits
  6. Start coding
  7. Watch mode development
  8. Ignore the folder generated by the TS compilation
  9. Adding unit tests
  10. Write a unit test example
  11. Set up some useful NPM scripts
  12. Improve the description of package.json
  13. Commit code to git repository
  14. Publish packages to NPM

In this article, I’ll list detailed instructions for each step.

In real development, if each package went through these steps, the steps would seem a bit much. Therefore, if you need to actually create a project, you can choose the clone sample project I provided to start the development of a new TS module. The main steps are as follows:

Git clone https://github.com/xiaomingplus/npm-typescript-boilerplate.git your CD - project - the name your project - the name # rely on installation Git remote set-url origin git remote set-url origin git remote set-url origin git remote set-url origin your-git-urlCopy the code

Here are the general steps. For learning purposes, it is recommended to follow the following steps:

1. Initialize the folder, NPM, and TSC

Git init # add gitignore file touch. Gitignore # copy this address to < https://github.com/github/gitignore/blob/master/Node.gitignore > # add readme file echo "# My Awesome Typescript Project" > > NPM init --y # init tsconfig TSC --initCopy the code

2. Modify the tsconfig.js configuration

Modify the following default configurations:

{
    "compilerOptions": {
        "declaration": true."outDir": "./lib",},"include": ["src"]."exclude": ["node_modules"."**/__tests__/*"]}Copy the code

The final tsconfig configuration is as follows:

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

3. Add the NPM script

Edit the scripts field in package.json:

{
  "scripts": {
    "start": "tsc -w"."build": "tsc"}}Copy the code

4. Add tsLint verification code rules and EditorConfig,prettier to unify the code style

npm install --save-dev prettier tslint tslint-config-prettier
Copy the code

New tslint.json file

{
  "extends": ["tslint:recommended"."tslint-config-prettier"]."rules": {
    "no-console": false."object-literal-sort-keys": false."member-access": false."ordered-imports": false
  },
  "linterOptions": {
    "exclude": ["**/*.json"."node_modules"]}}Copy the code

Create the. Prettierrc file

{
  "trailingComma": "all"."tabWidth": 4."semi": false."singleQuote": true."endOfLine": "lf"."printWidth": 120."overrides": [{"files": ["*.md"."*.json"."*.yml"."*.yaml"]."options": {
        "tabWidth": 2}}}]Copy the code

New. Editorconfig

# EditorConfig is awesome: https://EditorConfig.org # top-most EditorConfig file root = true # Unix-style newlines with a newline ending every file  [*] end_of_line = lf insert_final_newline = true charset = utf-8 indent_style = space indent_size = 4 [{*.json,*.md,*.yml,*.*rc}] indent_style = space indent_size = 2Copy the code

Add a handy scripts script:

{
  "scripts": {
    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\""."lint": "tslint -p tsconfig.json"}}Copy the code

5. Set the verification hooks submitted by Git

Set git’s submitted hook validation specification

npm install --save-dev husky @commitlint/config-conventional @commitlint/cli commitizen cz-conventional-changelog
Copy the code

Create a new commitlint.config.js file

touch commitlint.config.js
Copy the code

Writing:

module.exports = {
  extends: ["@commitlint/config-conventional"]};Copy the code

Create a new.huskyrc file

touch .huskyrc
Copy the code

Writing:

{
    "hooks": {
        "pre-commit": "npm run format && npm run lint && npm test"."commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}}Copy the code

Creating a configuration file:

touch .czrc
Copy the code

Write configuration:

{ "path": "cz-conventional-changelog" }
Copy the code

Package. json added scripts configuration:

{
  "scripts": {
    "commit": "git-cz"}}Copy the code

6. Start coding

cd project-name
mkdir src
cd src
touch index.ts
Copy the code

Write your first line of TS code:

export const Greeter = (name: string) = > `Hello ${name}`;
Copy the code

7. Development in Watch mode

npm start
Copy the code

8. Ignore the folder generated by ts compilation

Add the /lib folder to.gitignore

/lib
Copy the code

9. Add unit tests

npm install --save-dev jest ts-jest @types/jest
Copy the code

Create jestconfig.json file:

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

Modify test under scripts in package.json:

{
  "scripts": {
    "test": "jest --config jestconfig.json"}}Copy the code

10. Write a unit test example

Create a new __tests__ folder under the SRC folder to hold the test case files. Create a new greeter.test. ts file and say:

import { Greeter } from ".. /index";
test("My Greeter", () => {
  expect(Greeter("Carl")).toBe("Hello Carl");
});
Copy the code

Run the test case:

npm test
Copy the code

It should pass.

11. Set up some useful NPM scripts

Prepare: Runs before release and user installation

PrepublishOnly: Run before publication

Preversion: Run before creating a new version

Version: Runs after creating a version

Postversion: runs after a new version is created

{
  "scripts": {
    "prepare": "npm run build"."prepublishOnly": "npm test && npm run lint"."preversion": "npm run lint"."version": "npm run format && git add -A src"."postversion": "git push && git push --tags"}}Copy the code

12. Complete the description of package.json

Name Complete package name, description, package entry file main field, typescript type file types field definition

{
    "name": "project-name"
    "description": "A nice greeter"."main": "lib/index.js"."types": "lib/index.d.ts"
}
Copy the code

13. Improve document information

Create a new doc folder where you can document the module details:

mkdir doc
Copy the code

For information on how to improve readme.md, see the format here

14. Commit code to git repository

Commit your code to a Git repository after you publish it

Git add. Git commit -m "feat: initCopy the code

15. Release the package tonpm

If you are not already registered as an NPM user, you need to do so first.

npm adduser
Copy the code

Once registered, you can publish to NPM:

Package. json +1 NPM version patch NPM publishCopy the code

Once released, you can find your package at www.npmjs.com/

reference

Step by step: Building and publishing an NPM Typescript package.

This article has been authorized by the author to Tencent Cloud + community, more original text pleaseClick on the

Search concern public number “cloud plus community”, the first time to obtain technical dry goods, after concern reply 1024 send you a technical course gift package!