TypeScript 编写npm库

1. 创建仓库 初始化项目

在任意git仓库托管平台创建自己的仓库

使用 git clone <repository url> 将远程仓库克隆到本地

编辑 .gitignore(git 仓库忽略文件)

// .gitignore

.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

dist
node_modules

使用 yarn init 初始化项目

2. 安装必要的库

"devDependencies": {
    "@types/jest": "^27.0.1",
    "@types/node": "^16.6.1",
    "jest": "^27.0.6",
    "ts-jest": "^27.0.4",
    "ts-node": "^10.2.0",
    "typescript": "^4.3.5"
},

3. 配置 ts

在项目根目录 添加 tsconfig.json 文件

{
    "compilerOptions": {
      "sourceMap": true,
      "module": "commonjs", // 模块配置
      "noImplicitAny": true, // 是否默认禁用 any
      // "removeComments": true, // 是否移除注释
      "types": [ // 默认引入的类型声明
        "node", // 默认引入 node 的类型声明
        "jest"
      ],
      "baseUrl": ".", // 工作根目录
      "paths": {
        // ~/ 指向 server/types，types 目录下都是 types 文件，所以不会编译产出
        "~/*": [
          "./types/*"
        ]
      },
      "target": "es6", // 编译目标
      "outDir": "dist", // 输出目录
      "declaration": true, // 是否自动创建类型声明
    },
    // 此配置生效范围
    "include": [
      "lib/**/*"
    ],
  }

3. 配置 tslint

在项目根目录添加 tslint.json

{
    "defaultSeverity": "error",
    "extends": [
      "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
      "max-line-length": [
        true,
        140
      ],
      // 禁止内置原始类型
      "ban-types": false,
      // 禁止给参数赋值
      "no-parameter-reassignment": false,
      // 禁止空接口
      "no-empty-interface": true,
      // 显示类型代码就不需要再加类型声明了
      "no-inferrable-types": true,
      // 不允许使用内部模块
      "no-internal-module": true,
      // 不允许在变量赋值之外使用常量数值。如果未指定允许值的列表, 则默认情况下允许-1、0和1 => 乱七八糟的数字会让人混淆
      // "no-magic-numbers": [true],
      // 不允许使用内部 'modules' 和 'namespace'
      "no-namespace": true,
      // 非空断言，强制使用 == null 之类的断言
      // "no-non-null-assertion": true
      // 禁止 /// <reference path=>，直接用 import 即可
      "no-reference": true,
      // 禁止使用 require，应该使用 import foo = require('foo')
      "no-var-requires": false,
      // import 的顺序按照字母表
      "ordered-imports": false,
      // 对象属性声明按照字母表
      "object-literal-sort-keys": false,
      // // 结束语句后的分号
      "semicolon": [
        false,
        "always"
      ],
      // 字符串强制单引号
      "quotemark": [
        true,
        "single",
        "jsx-double"
      ],
      // 禁止 arguments.callee
      "no-arg": true,
      // if 语句的单行不用括号，多行用括号
      "curly": false,
      // 是否强制使用箭头函数，禁止匿名函数
      "only-arrow-functions": false,
      // 是否禁止多个空行
      "no-consecutive-blank-lines": false,
      // 在函数括号前要求或不允许空格
      "space-before-function-paren": false,
      // 箭头函数的参数使用括号
      "arrow-parens": [
        true,
        "ban-single-arg-parens"
      ],
      // 不固定变量类型
      "no-shadowed-variable": false,
      // 行尾多余的空格
      "no-trailing-whitespace": false,
      // == 和 ===
      "triple-equals": false,
      // 禁止一些位运算符
      "no-bitwise": false,
      // 禁止 console
      "no-console": false,
      // 检查变量名
      "variable-name": [
        true,
        "ban-keywords"
        // "check-format",
        // "allow-leading-underscore"
      ],
      // 一行声明变量表达式
      "one-variable-per-declaration": false,
      // 允许在一个文件里定义多个 class
      "max-classes-per-file": [
        true,
        5
      ],
      // 判断表达式 fn && fn()
      "no-unused-expression": [
        true,
        "allow-fast-null-checks"
      ],
      // 空函数
      "no-empty": false,
      // forin 是否必须包含 hasOwnProperty 判断
      "forin": false,
      "no-debugger": false,
      // 强制要求必须要声明类型
      "typedef": [
        true
      ]
    },
    "rulesDirectory": [
      "./lib"
    ]
  }

配置jest (ts 测试)

在package.json 中添加section

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

添加 script 方案

 "scripts": {
    "build": "tsc",
    "test": "jest --verbose"
  }

在根目录添加tests目录，添加xxx.test.ts测试用例

添加vscode Debug方案

在根目录创建 .vscode 文件夹 ，添加launch.json文件，添加配置如下:

// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
{
    "name": "Current TS File",
    "type": "node",
    "request": "launch",
    "args": [
        "${workspaceRoot}/tests/index.ts" // 入口文件
    ],
    "runtimeArgs": [
        "--nolazy",
        "-r",
        "ts-node/register"
    ],
    "sourceMaps": true,
    "cwd": "${workspaceRoot}",
    "protocol": "inspector",
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen"
}

github actions 实现 CI

在根目录中创建 .github/workflows/npm-publish.yml

# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

name: Node.js Package

on:
  push:
    tags: # 当提交代码为tag触发 如 git push origin v0.1.0
      - 'v*'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14
      - run: npm install
      - run: npm test

  publish-npm:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14
          registry-url: https://registry.npmjs.org/
      - run: npm install
      - run: npm run build
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

说明: secrets.npm_token 在github项目的setting中配置密钥，token在npm官网登入自己的账号获取

npm发布忽略

在根目录添加 .npmignore 文件

# 排除lib、tests目录
lib/
tests/
.github/

tslint.json
tsconfig.json

编写主要代码

在根目录中创建lib文件夹，所有ts代码放在这里