Typescript构建自己的工具包

项目中经常会用到某些方法，比如格式化时间戳，比如判断环境等等，笔者最初是把这些方法抽离出来写成公共方法，但由于后期项目扩展每次都要复制这个工具文件很是麻烦且效率低下，发布npm包正好解决了这个痛点，正好借此机会重构成ts文件并发布npm包。

本文只简要介绍下整个流程，具体参考utils项目

简要

• 工具
• 项目架构
• 打包
• 发布
• 文档输出

工具

• typescript
• typedoc
• rollup + gulp

项目架构

.
├── 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
├── tsconfig.json // ts配置
├── tslint.json // tslint配置
├── .prettierrc // prettier配置
├── .lintstagedrc // lintstage配置
└── typedoc.json // typedoc配置

1. npm init初始化项目
2. 在项目中新建一个src文件，编写公共文件
3. 需要一个types文件夹存放声明文件(用于代码提示)

4. 所有文件都需要通过src/index.ts 对外抛出

   
   代码提示
   代码提示

打包

使用gulp打包，使用rollup编译成一个文件

1. gulp配置中使用del删除dist文件
2. 使用rollup编译ts文件
3. 编译后会保留声明文件，在package.json中typings字段写入汇总的声明文件地址，用于代码提示
4. 丑化压缩js文件
5. 输出到package.json定义的入口文件dist/index.js

const gulp = require('gulp')
const del = require('del')
const rollup = require('rollup')
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')
  done()
}

async function task_ts () {
  const bundle = await rollup.rollup({
    input: 'src/index.ts',
    plugins: [
      typescript({ useTsconfigDeclarationDir: true }),
      uglify(),
    ]
  });

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

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

发布

1. 需要先在terminal登录npm
2. 手动修改package.json的version(后期脚本自动更新)，npm publish，成功后会得到一个版本信息

+ @jarvannnn/utils@0.0.1

3. npm i @jarvannnn/utils 就可以项目中引用了

文档输出

1. 配置typedoc

// package.json  scripts片段
{
  "build": "npm run lint && gulp && typedoc",
}
// tslint
// gulp 会自动识别根目录下gulpfile.js配置文件
// typedoc 自动识别根目录下typedoc.json配置文件
// 参考项目结构

2. build后就可以提交到git服务器，比如我用的gitee使用gitee pages（静态页面托管，免去自己申请域名、服务器、虚拟主机等，github有github pages等）
3. gitee pages简单的设置下入口文件(比如docs/index.html)就会生产对应的在线文档链接

4. 使用husky git钩子搭配 lint-staged 在提交时先去格式化暂存区代码，保持代码干净之后push代码

   
   gitee pages

---

后期优化部分（等闲下来 - -! ）

1. ts的单元测试
2. node自动化发布