项目中经常会用到某些方法，比如格式化时间戳，比如判断环境等等，笔者最初是把这些方法抽离出来写成公共方法，但由于后期项目扩展每次都要复制这个工具文件很是麻烦且效率低下，发布npm包正好解决了这个痛点，正好借此机会重构成ts文件并发布npm包。
本文只简要介绍下整个流程，具体参考utils项目
简要
- 工具
- 项目架构
- 初始化
- 单元测试
- 文档输出
- 打包
- 发布
工具
项目架构
.
├── 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
)
)
单元测试
配置代码通过率最低标准
例如我配置的 必须全部分支、方法、代码行数通过率达到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（静态页面托管，免去自己申请域名、服务器、虚拟主机等，github有github pages等）
- gitee pages简单的设置下入口文件(比如docs/index.html)就会生产对应的在线文档链接
-
使用 git hooks搭配 lint-staged 在提交时先去格式化暂存区代码，保持代码干净之后push代码
gitee pages
打包
使用rollup配合gulp打包编译
- gulp配置中使用del删除dist文件，避免其他意外问题
- 使用rollup编译ts文件
- 编译后会保留声明文件，在package.json中typings字段写入汇总的声明文件地址，用于代码提示
- 丑化压缩js文件
- 输出到package.json定义的入口文件dist/index.js
发布
一、发布到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指令使其运行到后台 - 现在我们可以通过
localhost:4873访问npm私服[2] - 发布到verdaccio平台 首先需要在terminal中输入
npm adduser --registry http://localhost:4873注册用户，输入用户名、密码、邮箱等信息注册 -
npm publish --registry http://localhost:4873发布代码包
tips: 如果跟我一样不喜欢每次发布都要输入--registry，那么可以借助nrm[3]镜像源管理工具来管理本地源
项目中使用
代码提示
代码提示
