從零發佈TypeScript npm工具包

前言

編程工做中，常常會封裝一些經常使用的代碼片斷，好比如何獲取時間，格式化時間等。

不一樣的團隊，不一樣的業務就會有多個相互獨立的項目。

咱們能夠將公用的一些工具庫函數封裝成npm包的形式，可讓我的或者團隊這些import包就能夠直接使用。

1.註冊NPM帳號

先去官網註冊一個帳號，填寫好帳號、密碼、郵箱

www.npmjs.com/

2.初始化項目

建立util-snippets文件夾

mkdir util-snippets 
複製代碼

初始化package.json

npm init
複製代碼

填寫好npm包的信息，做者信息，版本信息，並在package.json中的字段指定入口文件是./build/index.js

"main": "./build/index.js",
複製代碼

安裝包

安裝包文件，在package.json中配置scripts執行腳本:編譯運行，測試，格式化代碼等。 具體配置可在package.json中查看。

在根目錄中添加tsconfig.json還有tslint.json文件

安裝項目須要用到的包：

npm install typescript tslib ts-jest @types/jest --save
複製代碼

安裝團隊合做須要用的包，好比統一代碼風格，每次git commit都會統一格式化和美化代碼：

npm install husky lint-staged tslint-config-prettier --save
複製代碼

• 在package.json中添加scripts,在build以前先自動跑測試用例，確保代碼運行的質量。

  "scripts": {
  "dev": "npm run tsc:w", // 監聽文件修改並實時編譯
  "build": "npm run test && npm run lint && tsc", // 運行測試，優化代碼和編譯
  "lint": "prettier --write --parser typescript 'src/**/*.ts' // 格式化同時代嗎 'test/**/*.ts'",
  "test:w": "jest --watchAll", // 監聽測試文件修改並實時編譯,用戶本地開發
  "test": "jest" // 運行測試用例
  },
  複製代碼

配置Jest單元測試

單元測試能夠及時發現代碼的問題，讓你發佈的npm包更安全更嚴謹。

• 配置 jest.config.js
• 編寫單元測試用例 // 在test文件夾中 xxx.test.ts
• 執行 npm run test

3.npm本地調試

開發好的包須要調試才能夠放心的讓本身和其餘人使用，之前的調試是經過不一樣指定發佈不一樣的tag，頻繁發佈到線上，再從新安裝依賴，這樣會影響到用戶，效率也低下。

如今將本地開發的npm包link到本地，而後經過另一個項目import進去，就能夠實現先在本地調試，調試成功，再發布到npm的官網上。樣就能夠直接模擬正常使用包的狀況。

在util-snippets目錄下執行

npm link // 至關於npm install util-snippets
複製代碼

在其餘須要測試util-snippets目錄下直接import進去就可使用了

import { allEqual } from 'utl-snippets'
複製代碼

發佈到npm包到線上

1.在命令行登陸

npm login
複製代碼

2.發佈

npm publish
複製代碼

發佈成功就直接能夠import使用了

在線測試

https://codesandbox.io/s/serene-wilbur-6uy5q

其餘

• 發佈tag包 每次publish都會是@lastet版本，用戶安裝的也是lastet，咱們能夠指定tag別名來發布

  npm publisb --tag tabName(alpha)
  複製代碼

• 修改版本 每次修改都會手動修改package.json裏面的version才能發佈,能夠指定如下命令來規範版本號

  npm version patch  // 小變更，好比修復bug等，版本號變更 v1.0.0->v1.0.1
    npm publish // 增長新功能，不影響現有功能,版本號變更 v1.0.0->v1.1.0
    npm version // 破壞模塊對向後的兼容性，版本號變更 v1.0.0->v2.0.0
  複製代碼

倉庫地址：github.com/czero1995/u…

倉庫地址：www.npmjs.com/package/uti…

啓動項目

git clone https://github.com/czero1995/util-snippets.git
cd util-snippets
npm i
npm run build
複製代碼

引用util-snippets

import { allEqual } from 'util-snippets'複製代碼