使用rollup和typescript搭建自己的函数库

简介

每当在项目中需要使用一些工具函数时，一般需要去引入一些第三方的工具库，而像lodash这样的工具库又体积很大，影响打包后整个项目的大小。所以封装自己的代码库就很必要了。

本篇文章将介绍如何使用rollup工具生成自己的代码库；
为了提高代码可维护性，将使用typescript编写代码；
为了保证代码质量，将通过jest进行代码测试;
工具库需要可查阅的文档，为了更好的支持typescript，使用了typedoc生成文档。

依赖的库

• rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
• typescript javascript的超集，支持类型定义。
• typedoc 生成库文档
• jest 用于代码单元测试

初始化项目

• 先创建目录并初始化node项目。

  mkdir myTools
  cd myTools
  npm init -y

• 安装rollup

  npm install rollup -D

• 先创建modules目录，然后再在目录中创建入口文件index.js
• 之后创建rollup.config.js，配置如下：

  export default {
  input: "modules/index.js",
  output: [
  {
    file: "lib/bundle.cjs.js",
    format: "cjs",
  },
  {
    file: "lib/bundle.esm.js",
    format: "es",
  },
  ],
  };

  配置地址：https://www.rollupjs.com/guide/big-list-of-options/

  amd – 异步模块定义，用于像RequireJS这样的模块加载器
  cjs – CommonJS，适用于 Node 和 Browserify/Webpack
  esm – 将软件包保存为 ES 模块文件，在现代浏览器中可以通过 <script type=module> 标签引入
  iife – 一个自动执行的功能，适合作为<script>标签。（如果要为应用程序创建一个捆绑包，您可能想要使用它，因为它会使文件大小变小。）
  umd – 通用模块定义，以amd，cjs 和 iife 为一体
  system - SystemJS 加载器格式

• 然后在package.json文件中加入运行命令

  {
  ...
  "scripts": {
      "build": "rollup --config"
  },
  ...
  }

• 执行命令npm run build将自动打包代码到lib目录。

添加typescript支持

• 安装支持库

  npm install typescript rollup-plugin-typescript tslib -D

• 修改rollup.config.js配置，添加typescipt插件

  import typescript from "rollup-plugin-typescript";
  export default {
  input: "modules/index.ts",
  output: [
  {
    file: "lib/bundle.cjs.js",
    format: "cjs",
  },
  {
    file: "lib/bundle.esm.js",
    format: "es",
  },
  ],
  plugins: [
  typescript({
    exclude: "node_modules/**",
    typescript: require("typescript"),
  }),
  ],
  };

• 将modules/index.js入口文件修改为modules/index.ts

jest测试

接下来需要配置项目支持jest测试，保证代码正确性。

• 先安装jest支持

  npm install --save-dev jest ts-jest @types/jest

• 在根目录创建jest.config.js文件

  module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
  };

• 在modules/index.ts写如下代码，导出版本。

  export const version: string = "1.0.0";

• 创建test目录，并添加index.spec.ts测试文件，内容如下：

  import { version } from "../modules/index";
  test("当前项目版本为 1.0.0", () => {
  expect(version).toBe("1.0.0");
  });

• 接下来添加运行命令，在package.json中添加：

  "test": "jest --no-cache"

• 然后运行npm run test命令进行测试，jest语法详情见官网。

文档生成

• 安装typedoc依赖

  npm install typedoc -D

• 创建typedoc.json配置文件

  {
  "inputFiles": ["./modules"],
  "mode": "modules",
  "out": "docs",
  "exclude": "modules/index.ts"
  }

• 编写注释
  编写注释的方法在这里：typedoc
  在modules/index.ts中编写文档注释

  /**
  * 当前函数库版本
  */
  export const version: string = "1.0.0";

• 在package.json中添加生成文档的命令

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

• 运行npm run doc命令生成文档，文档将生成在docs目录，可以通过gitpage展示文档。

入口编写

项目结构搭建好后，就可以添加自己的工具函数，为了在单个js文件中导出，需要将所有函数通过index.ts导出。
这里我在modules目录中编写了4个工具函数，分别是clone、cloneDeep、debounce、throttle。
我需要在index.ts中将所有函数导出，如下：

// functoin
export { default as debounce } from "./debounce";
export { default as throttle } from "./throttle";
export { default as clone } from "./clone";
export { default as cloneDeep } from "./cloneDeep";

这样就能通过import { cloneDeep } from "myTools"引入函数了。

我的函数库在这里https://github.com/iwowen/tutils