項目中經(jīng)常會用到某些方法，比如格式化時間戳，比如判斷環(huán)境等等，筆者最初是把這些方法抽離出來寫成公共方法，但由于后期項目擴展每次都要復制這個工具文件很是麻煩且效率低下，發(fā)布npm包正好解決了這個痛點，正好借此機會重構成ts文件并發(fā)布npm包。
本文只簡要介紹下整個流程，具體參考utils項目
簡要
- 工具
- 項目架構
- 初始化
- 單元測試
- 文檔輸出
- 打包
- 發(fā)布
工具
項目架構
.
├── 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 // 單元測試
│ ├── core // 核心代碼單元測試
│ │ ├── env.spec.ts
│ │ └── ***.spec.ts
│ └── index.spec.ts
├── tsconfig.json // ts配置
├── tslint.json // tslint配置
├── .prettierrc // prettier配置
├── .lintstagedrc // lintstage配置
└── typedoc.json // typedoc配置
初始化
-
npm init初始化項目 - 安裝依賴
npm i -D gulp del typescript - 安裝rollup依賴
npm i -D rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-typescript2 rollup-plugin-uglify rollup-plugin-sourcemaps rollup-plugin-json - 安裝輔助插件
npm i -D typedoc jest @types/jest ts-jest - 在項目中新建一個src文件，編寫公共文件
- 需要一個types文件夾存放聲明文件(用于代碼提示)
- 所有文件都需要通過src/index.ts 對外拋出
// 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')
// 刪除打包后的文件 目的為了每次打包出來的結果更干凈，避免某些文件沒被刪除等原因拋錯
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
)
)
單元測試
配置代碼通過率最低標準
例如我配置的 必須全部分支、方法、代碼行數(shù)通過率達到90%才算測試通過
coverageThreshold: {
global: {
branches: 90,
functions: 90,
lines: 90,
statements: -5
}
}
jest --coverage // 生成測試覆蓋率
測試結果
文檔輸出
- 配置typedoc
// package.json scripts片段
{
"build": "npm run lint && gulp && typedoc",
}
// tslint
// gulp 會自動識別根目錄下gulpfile.js配置文件
// typedoc 自動識別根目錄下typedoc.json配置文件
// 參考項目結構
- build后就可以提交到git服務器，比如我用的gitee使用gitee pages（靜態(tài)頁面托管，免去自己申請域名、服務器、虛擬主機等，github有github pages等）
- gitee pages簡單的設置下入口文件(比如docs/index.html)就會生產(chǎn)對應的在線文檔鏈接
-
使用 git hooks搭配 lint-staged 在提交時先去格式化暫存區(qū)代碼，保持代碼干凈之后push代碼
gitee pages
打包
使用rollup配合gulp打包編譯
- gulp配置中使用del刪除dist文件，避免其他意外問題
- 使用rollup編譯ts文件
- 編譯后會保留聲明文件，在package.json中typings字段寫入?yún)R總的聲明文件地址，用于代碼提示
- 丑化壓縮js文件
- 輸出到package.json定義的入口文件dist/index.js
發(fā)布
一、發(fā)布到npm市場
- 需要先在terminal登錄npm
- 手動修改package.json的version(后期腳本自動更新)，npm publish，成功后會得到一個版本信息
+ @jarvannnn/utils@0.0.1
- npm i --save @jarvannnn/utils 就可以項目中使用了
二、使用verdaccio搭建npm私服，并使用pm2守護進程
-
npm install -g verdaccio pm2全局安裝verdaccio以及pm2[1] - terminal直接輸入verdaccio 即可立即運行，默認拋出端口為4873，我們可以使用
pm2 start verdaccio指令使其運行到后臺 - 現(xiàn)在我們可以通過
localhost:4873訪問npm私服[2] - 發(fā)布到verdaccio平臺 首先需要在terminal中輸入
npm adduser --registry http://localhost:4873注冊用戶，輸入用戶名、密碼、郵箱等信息注冊 -
npm publish --registry http://localhost:4873發(fā)布代碼包
tips: 如果跟我一樣不喜歡每次發(fā)布都要輸入--registry，那么可以借助nrm[3]鏡像源管理工具來管理本地源
項目中使用
代碼提示
代碼提示
