項(xiàng)目中經(jīng)常會(huì)用到某些方法，比如格式化時(shí)間戳，比如判斷環(huán)境等等，筆者最初是把這些方法抽離出來(lái)寫(xiě)成公共方法，但由于后期項(xiàng)目擴(kuò)展每次都要復(fù)制這個(gè)工具文件很是麻煩且效率低下，發(fā)布npm包正好解決了這個(gè)痛點(diǎn)，正好借此機(jī)會(huì)重構(gòu)成ts文件并發(fā)布npm包。

本文只簡(jiǎn)要介紹下整個(gè)流程，具體參考utils項(xiàng)目

簡(jiǎn)要

• 工具
• 項(xiàng)目架構(gòu)
• 初始化
• 單元測(cè)試
• 文檔輸出
• 打包
• 發(fā)布

工具

• typescript
• typedoc
• rollup + gulp
• jest
• pm2 + verdaccio

項(xiàng)目架構(gòu)

.
├── LICENSE
├── README.md
├── docs // typedoc生成的文檔
│   ├── assets
│   ├── globals.html
│   ├── index.html
│   └── interfaces
├── gulpfile.js // gulp+rollup配置文件
├── package.json
├── src // 代碼模塊
│   ├── core // 核心代碼塊
│   │   ├── env.ts
│   │   └── ***.ts
│   ├── index.ts // 入口文件
│   ├── tools
│   │   └── index.ts
│   └── types // 聲明文件
│       └── index.ts
├── test // 單元測(cè)試
│   ├── core // 核心代碼單元測(cè)試
│   │   ├── env.spec.ts
│   │   └── ***.spec.ts
│   └── index.spec.ts
├── tsconfig.json // ts配置
├── tslint.json // tslint配置
├── .prettierrc // prettier配置
├── .lintstagedrc // lintstage配置
└── typedoc.json // typedoc配置

初始化

1. npm init初始化項(xiàng)目
2. 安裝依賴(lài)npm i -D gulp del typescript
3. 安裝rollup依賴(lài)npm i -D rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-typescript2 rollup-plugin-uglify rollup-plugin-sourcemaps rollup-plugin-json
4. 安裝輔助插件npm i -D typedoc jest @types/jest ts-jest
5. 在項(xiàng)目中新建一個(gè)src文件，編寫(xiě)公共文件
6. 需要一個(gè)types文件夾存放聲明文件(用于代碼提示)
7. 所有文件都需要通過(guò)src/index.ts 對(duì)外拋出

// gulpfile.js
const gulp = require('gulp')
const del = require('del')
const rollup = require('rollup')
const json = require('rollup-plugin-json')
const commonjs = require('rollup-plugin-commonjs')
const resolve = require('rollup-plugin-node-resolve')
const sourceMaps = require('rollup-plugin-sourcemaps')
const typescript = require('rollup-plugin-typescript2')
const uglify = require('rollup-plugin-uglify').uglify
const pkg = require('./package.json')

// 刪除打包后的文件 目的為了每次打包出來(lái)的結(jié)果更干凈，避免某些文件沒(méi)被刪除等原因拋錯(cuò)
function task_clean (done) {
  del.sync('dist')
  del.sync('docs')
  done()
}

async function task_ts () {
  const bundle = await rollup.rollup({
    input: 'src/index.ts',
    plugins: [
      json(),
      // Compile TypeScript files
      typescript({ useTsconfigDeclarationDir: true }),
      // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
      commonjs(),
      // Allow node_modules resolution, so you can use 'external' to control
      // which external modules to include in the bundle
      // https://github.com/rollup/rollup-plugin-node-resolve#usage
      resolve(),
  
      // Resolve source maps to the original source
      sourceMaps(),
      uglify(),
    ]
  });

  await bundle.write({
    file: pkg.main,
    format: 'umd',
    name: pkg.name,
    sourcemap: false
  })
}

gulp.task('default',
  gulp.parallel(
    task_clean,
    task_ts
  )
)

單元測(cè)試

配置代碼通過(guò)率最低標(biāo)準(zhǔn)
例如我配置的 必須全部分支、方法、代碼行數(shù)通過(guò)率達(dá)到90%才算測(cè)試通過(guò)

  coverageThreshold: {
    global: {
      branches: 90,
      functions: 90,
      lines: 90,
      statements: -5
    }
  }

jest --coverage // 生成測(cè)試覆蓋率

測(cè)試結(jié)果

文檔輸出

1. 配置typedoc

// package.json  scripts片段
{
  "build": "npm run lint && gulp && typedoc",
}
// tslint
// gulp 會(huì)自動(dòng)識(shí)別根目錄下gulpfile.js配置文件
// typedoc 自動(dòng)識(shí)別根目錄下typedoc.json配置文件
// 參考項(xiàng)目結(jié)構(gòu)

2. build后就可以提交到git服務(wù)器，比如我用的gitee使用gitee pages（靜態(tài)頁(yè)面托管，免去自己申請(qǐng)域名、服務(wù)器、虛擬主機(jī)等，github有g(shù)ithub pages等）
3. gitee pages簡(jiǎn)單的設(shè)置下入口文件(比如docs/index.html)就會(huì)生產(chǎn)對(duì)應(yīng)的在線文檔鏈接

4. 使用 git hooks搭配 lint-staged 在提交時(shí)先去格式化暫存區(qū)代碼，保持代碼干凈之后push代碼

   
   
   gitee pages

打包

使用rollup配合gulp打包編譯

1. gulp配置中使用del刪除dist文件，避免其他意外問(wèn)題
2. 使用rollup編譯ts文件
3. 編譯后會(huì)保留聲明文件，在package.json中typings字段寫(xiě)入?yún)R總的聲明文件地址，用于代碼提示
4. 丑化壓縮js文件
5. 輸出到package.json定義的入口文件dist/index.js

發(fā)布

一、發(fā)布到npm市場(chǎng)

1. 需要先在terminal登錄npm
2. 手動(dòng)修改package.json的version(后期腳本自動(dòng)更新)，npm publish，成功后會(huì)得到一個(gè)版本信息

+ @jarvannnn/utils@0.0.1

3. npm i --save @jarvannnn/utils 就可以項(xiàng)目中使用了

二、使用verdaccio搭建npm私服，并使用pm2守護(hù)進(jìn)程

1. npm install -g verdaccio pm2全局安裝verdaccio以及pm2^[1]
2. terminal直接輸入verdaccio 即可立即運(yùn)行，默認(rèn)拋出端口為4873，我們可以使用pm2 start verdaccio指令使其運(yùn)行到后臺(tái)
3. 現(xiàn)在我們可以通過(guò)localhost:4873訪問(wèn)npm私服^[2]
4. 發(fā)布到verdaccio平臺(tái) 首先需要在terminal中輸入npm adduser --registry http://localhost:4873注冊(cè)用戶(hù)，輸入用戶(hù)名、密碼、郵箱等信息注冊(cè)
5. npm publish --registry http://localhost:4873 發(fā)布代碼包

tips: 如果跟我一樣不喜歡每次發(fā)布都要輸入--registry，那么可以借助nrm^[3]鏡像源管理工具來(lái)管理本地源

項(xiàng)目中使用

代碼提示

代碼提示

1. • pm2 start verdaccio 啟動(dòng)verdaccio
   • pm2 stop verdaccio(all) 停掉verdaccio(或全部)
   • pm2 delete verdaccio 刪除verdaccio
   • pm2 show verdaccio 顯示verdaccio運(yùn)行日志
   ?

2. localhost可替換為本機(jī)ip ?

3. • nrm add mynpm http://localhost:4873 添加本地源
   • nrm use mynpm 切換本地源
   • nrm ls 查看本地所有源
   ?