使用Typescript編寫和發(fā)布npm包

本文參照 Chidume Nnamdi 的「How to Create and Publish an NPM module in TypeScript」博客，結(jié)合自身實(shí)踐總結(jié)而成。
原文地址：https://codeburst.io/https-chidume-nnamdi-com-npm-module-in-typescript-12b3b22f0724

Step 1 初始化 Git 環(huán)境

  1. 在Github上創(chuàng)建一個(gè)遠(yuǎn)程倉庫
  2. 下載到本地。
git clone https://github.com/youthcity/ts-hi.git

Step 2 初始化 NPM 包

npm init  # 或者使用， npm init -y 跳過所有提問

根據(jù)提示，填寫相應(yīng)信息，得到 package.json文件

# package.json

{
  "name": "ts-hi",
  "version": "0.0.1",
  "description": "create npm package with typescript",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/youthcity/ts-hi.git"
  },
  "keywords": [
    "typescript"
  ],
  "author": "youthcity",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/youthcity/ts-hi/issues"
  },
  "homepage": "https://github.com/youthcity/ts-hi#readme"
}

Step 3 安裝依賴

安裝 Typescript

# 使用 npm 安裝
npm i typescript -D

# 或使用 yarn 進(jìn)行安裝
yarn add typescript -D

配置 tsconfig.json 文件

手動(dòng)創(chuàng)建配置文件，文件如下

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  }
}

使用命令行創(chuàng)建。

# 需要全局安裝 typescript包
npm i typescript -D
tsc --init 

# 使用當(dāng)前項(xiàng)目中的 typescript
./node_modules/.bin/tsc --init

配置成的文件如下：

{
  "compilerOptions": {
    "target": "es5", // 指定ECMAScript目標(biāo)版本
    "module": "commonjs", // 指定模塊化類型
    "declaration": true, // 生成 `.d.ts` 文件
    "outDir": "./dist", // 編譯后生成的文件目錄
    "strict": true // 開啟嚴(yán)格的類型檢測(cè)
  }
}

Step 4 開始編碼

mkdir lib # 在 ts-hi 根目錄下，創(chuàng)建 lib 文件夾
touch index.ts

index.ts

# 非常簡(jiǎn)單的加法函數(shù)
export function add(a:number, b:number) : number {
  return a + b;
}

Step 5 編譯

將編譯命令添加到 package.json 文件中

{
  "name": "ts-hi",
  "version": "0.0.1",
  "description": "create npm package with typescript",
  "main": "index.js",
  "scripts": {
    "build": "tsc" # 增加 ts 編譯命令
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/youthcity/ts-hi.git"
  },
  "keywords": [
    "typescript"
  ],
  "author": "youthcity",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/youthcity/ts-hi/issues"
  },
  "homepage": "https://github.com/youthcity/ts-hi#readme",
  "devDependencies": {
    "typescript": "^3.0.3"
  }
}

運(yùn)行命令，執(zhí)行編譯

npm run build

編譯完成后，我們可以看到目錄下出現(xiàn)了 dist目錄，在該目錄下生成了兩個(gè)文件，一個(gè)包含代碼邏輯的 JS 文件，一個(gè)包含類型定義的 interface文件。

tsc 編譯后生成的文件

Step 6 編寫測(cè)試

1）安裝測(cè)試框架和斷言庫

npm i mocha -D
npm i chai -D

2）創(chuàng)建測(cè)試文件目錄和文件

# 根目錄下
mkdir test && touch test/test.js

test.js

'use strict';
const expect = require('chai').expect;
const add = require('../dist/index').add;

describe('ts-hi function test', () => {
  it('should return 2', () => {
    const result = add(1, 1);
    expect(result).to.equal(2);
  });
});

Step 7 運(yùn)行測(cè)試

添加測(cè)試腳本

  "scripts": {
    "build": "tsc",
    "test": "mocha --reporter spec"
  },

運(yùn)行測(cè)試腳本

npm run test
測(cè)試結(jié)果

Step 8 添加 README

touch README.md

# 編寫文檔介紹...

Step 9 提交 和 推送遠(yuǎn)端

touch .gitignore // 創(chuàng)建 .gitignore 文件，并添加 node_modules/ 避免將node_modules 添加到版本控制中
git add . 
git commit -m “Initial release”
git tag v0.1.0  # 修改一下 package.json中的版本號(hào)為 0.1.0
git push origin master --tags

Step 10 發(fā)布

在發(fā)布代碼之前，需要將一些沒有必要的文件或目錄從安裝文件中排出。例如，lib文家目錄。創(chuàng)建 .npmignore 文件。

.npmignore

# 排除 lib文件
lib/

登錄 npm，并發(fā)布包

# 登錄 npm， 若無賬號(hào)，請(qǐng)?jiān)趆ttps://www.npmjs.com/ 注冊(cè)賬號(hào)
npm adduser
Username: youthcity
Password:
Email: (this IS public) 填寫郵箱
Logged in as youthcity on https://registry.npmjs.org/.

# 發(fā)布包
npm publish

查看發(fā)布后的包： https://www.npmjs.com/package/ts-hi

Step 11 添加 CI（持續(xù)集成）

1）登錄 Travis CI
2）點(diǎn)擊 “Sign in with Github”
3）勾選需要持續(xù)集成的項(xiàng)目，本例為 ts-hi

travis 項(xiàng)目面板

4）在項(xiàng)目添加 travis 的配置文件
.travis.yml

language : node_js
node_js :
 - stable
install:
 - npm install
script:
 - npm test

5）將配置推送到 Github 的遠(yuǎn)程倉庫。查看 travis 構(gòu)建狀態(tài)。


ts-hi 構(gòu)建狀態(tài)

其他功能

添加 Travis 構(gòu)建徽章到 README

  1. 登錄Travis并訪問項(xiàng)目頁面

  2. 獲取徽章圖片代碼


    徽章代碼

    獲取代碼
  3. 將代碼粘貼到 README 中 （若需要多個(gè) badge 并排展示，徽章代碼之間，不要空行）
  4. git commit -m 'doc(README): add travis badge' && git push origin master

查看項(xiàng)目首頁即可。例如，https://github.com/youthcity/ts-hi

添加代碼覆蓋率

  1. 使用 github 賬號(hào)登錄 coveralls，勾選需要執(zhí)行代碼覆蓋率檢查的倉庫
  2. 在項(xiàng)目中，添加開發(fā)依賴
npm i istanbul -D
npm i coveralls -D
  1. 在 package.json 的配置文件中，添加腳本
"cover": "istanbul cover node_modules/mocha/bin/_mocha test/*.js - - -R spec"

添加后 package.json

  "scripts": {
    "build": "tsc",
    "test": "mocha --reporter spec",
    "cover": "istanbul cover node_modules/mocha/bin/_mocha test/*.js - - -R spec"
  },
  1. 修改 .travis.yml 文件
language : node_js
node_js :
 - stable
install:
 - npm install
script:  
 - npm run cover
 # Send coverage data to Coveralls
after_script: "cat coverage/lcov.info | node_modules/coveralls/bin/coveralls.js"
  1. 運(yùn)行命令
npm run cover
  1. commit 和 推送代碼到 github 倉庫

登錄 Coveralls ，檢查是否執(zhí)行順利。

Coveralls / ts-hi

  1. 獲取 Badge


    獲取 Badge

如何快速生成 .gitignore

  1. 訪問 https://www.gitignore.io/
  2. 選擇項(xiàng)目環(huán)境。以本環(huán)境為例，輸入 node、macOS、vscode（會(huì)自動(dòng)提示為，VisualStudioCode）。
  3. 點(diǎn)擊 Create，獲取 .gitignore 文件

總結(jié)

通過使用 Typescript 編寫 NPM 包，實(shí)踐了很多以前遇到過但未使用過的技術(shù)。例如，Travis 的持續(xù)集成、 mocha 和 chai 編寫測(cè)試、coveralls 代碼覆蓋、如何添加 badge 等。

參考資料

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容