在日常开发中，我们会经常在不同项目中封装一些公用的方法来辅助开发，随着项目的增多，可能多个项目都会使用同样的方法，每个项目都在写一遍的话，显得有点多余。所以在本文中，来教大家如何打造自己的工具库，方便同一管理和维护。

初始化项目

首先创建一个项目目录，如这里叫 tool-helper ，然后执行 pnpm init 来初始化。执行完之后就可以在根目录下生成一个 package.json 文件。

依赖安装

安装以下依赖

pnpm i typescript rollup rollup-plugin-dts @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-json @rollup/plugin-alias rollup-plugin-esbuild rollup-plugin-typescript2 @rollup/plugin-babel @babel/core esbuild -D

依赖	版本	作用
typescript	4.6.4	typescript
rollup	2.73.0	是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码
rollup-plugin-dts	4.2.1	生成 `d.ts` 文件
@rollup/plugin-node-resolve	13.3.0	在 node_modules 中找到并捆绑第三方依赖项
@rollup/plugin-commonjs	22.0.0	将 CommonJS 模块转换为 ES6
@rollup/plugin-json	4.1.0	将 .json 文件转换为 ES6 模块
@rollup/plugin-alias	3.1.9	定义和解析捆绑包依赖项的别名
rollup-plugin-esbuild	4.9.1	Rollup 和 Esbuild 之间的集成
rollup-plugin-typescript2	0.31.2	Rollup 和 Typescript 之间的集成
@rollup/plugin-babel	5.3.1	使用 Babel 编译文件
@babel/core	7.17.10	Babel 核心库
esbuild	7.17.10	Esbuild 核心库

Rollup 配置

接下来在根目录下创建 rollup.config.ts 文件，并添加以下代码。

import dts from 'rollup-plugin-dts'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import json from '@rollup/plugin-json'
import alias from '@rollup/plugin-alias'
import esbuild from 'rollup-plugin-esbuild'
import typescript from 'rollup-plugin-typescript2'
import babel from '@rollup/plugin-babel'

const entries = ['src/index.ts']

const plugins = [
  babel({
    babelrc: false,
    babelHelpers: 'bundled',
    presets: [['env', { modules: false }]]
  }),
  resolve({
    preferBuiltins: true
  }),
  alias(),
  json(),
  typescript(),
  commonjs(),
  esbuild()
]

export default [
  ...entries.map((input) => ({
    input,
    output: [
      {
        file: input.replace('src/', 'dist/').replace('.ts', '.mjs'),
        format: 'esm'
      },
      {
        file: input.replace('src/', 'dist/').replace('.ts', '.cjs'),
        format: 'cjs'
      }
    ],
    external: [],
    plugins
  })),
  ...entries.map((input) => ({
    input,
    output: {
      file: input.replace('src/', '').replace('.ts', '.d.ts'),
      format: 'esm'
    },
    external: [],
    plugins: [dts({ respectExternal: true })]
  }))
]

编写工具函数

在根目录下创建 src/index.ts 文件，并添加自己的工具函数，如

export const trim = (s: string): string => {
  return (s || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
}

调试&打包

在 package.json 中添加以下运行命令

"build": "rollup -c",
"dev": "rollup -c --watch",

pnpm run dev 会实时监听文件的修改自动打包到 dist 目录中，而 pnpm run build 则是当要发布的时候执行的打包命令。

生成文档

虽然我们的库越来越大时，文档是必不可少的，这里我们采用的是 typedoc 来根据注释自动生成文档。

pnpm i typedoc -D

之后我们试着在代码中添加注释

/**
 * 去除两边空格
 *
 * @version 1.1.0
 * @category Public
 * @param s 去除空格的字符串
 * @example
 *
 * ``` typescript
 * trim('  123  ')
 * ```
 */
 export const trim = (s: string): string => {
  return (s || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
}

然后在根目录下创建 typedoc.json 文件并添加以下代码

{
  "entryPoints": ["./src"],
  "out": "docs"
}

在 package.json 添加生成文档的运行命令

"doc": "typedoc --options typedoc.json",

之后运行 pnpm run doc 即可在根目录下创建 docs 目录。

发布

由于我们的工具库是需要发布到 npm 上的，所以需要在 package.json 中添加以下字段

  "main": "dist/index.cjs",
  "module": "dist/index.mjs",
  "types": "index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs",
      "types": "./index.d.ts"
    }
  },
  "files": [
    "dist",
    "*.d.ts"
  ],

之后就可以 npm publish 发布到 npm 仓库中了。

总结

由于本文只是简单的教大家如何搭建及发布，更多细节可以参考 tool-helper

Rollup + Typescript 打造一个工具库