Visual Studio + TypeScript + Jest 專案要Publish 到 NPM 除雷教學 一步一步

最近我把 Nodejs 專案轉成 TypeScript,發現原本的步驟都要做些修改阿 這邊紀錄一下我除雷的過程

tsconfig.json 修改

1. 如果在 /tsconfig.json 不存在這個檔案 請建立.
2. 修改資料如下

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

Visual Studio Project Properties

1. 記得 startuo file 要修改成 lib/<啟動的檔名>.ts  這樣才能啟動

Jest Config

3. 安裝 npm install --save-dev jest ts-jest @types/jest
4. 創立 jestconfig.json 內容如下.

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

Note roots 要設定不然同個 test 會跑兩次

5. 刪掉原本 package.json   中的的 test  script 換成新的 : "test": "jest --config jestconfig.json",

6. 因為我們設定 test 的命名規則是  __tests__  所以名稱應該是要 ***.tests.ts

example. 我們創建一個 Greeter.test.ts 內容如下

Greeter.test.ts

import { Greeter } from '../index';test('My Greeter', () => {
  expect(3).toBe(3);
});

Now, Try to run

npm test

index.ts

1. 創建 npm 套件 引用索引物件 /index.ts
2. 內容類似如下 (請照自己的要開放的物件為主)

import { Config } from "./Config"
import { Warder } from "./warder/Warder";
import { ReactiveGener } from "./run/ReactiveGener";
import { BZKLauncher } from "./run/BZKLauncher";
import { Runer } from "./run/Runer";
import { UntilsUtils } from "./UntilsUtils";
import { Action } from "./comm/delegate/Action";
import { ActionT1 } from "./comm/delegate/ActionT1";
import { FuncT1 } from "./comm/delegate/FuncT1";
import { OOAction } from "./comm/delegate/OOAction";
import { OOActionT1 } from "./comm/delegate/OOActionT1";


export {
    Config, Warder, ReactiveGener, BZKLauncher, Runer, UntilsUtils,
    Action, ActionT1, FuncT1, OOAction, OOActionT1
}

3. 使用該物件的 import 如下

import { Config , Warder } from "<你的npm套件名稱>";

package.json

{
  "name": "<你的npm套件名稱>",
  "version": "0.0.6",
  "description": "AutoTradeBazookaFramework",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "author": "Kirin",
  ...
}

1. main 和 types 請記得修改 , 其他都與之前上傳 npm 該注意的一樣

跟之前一樣 npm publish

如果還不知道如何 publish 到 npm 的同學可以先參考這一篇 https://blog.toright.com/posts/4874/%E5%A6%82%E4%BD%95%E7%99%BC%E4%BD%88%E4%BD%A0%E7%9A%84%E3%80%8C%E5%8C%85%E3%80%8D%E5%88%B0-npm-repository.html