使用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",
    },
  ],
};

配置地址：www.rollupjs.com/guide/big-l…

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"引入函数了。

我的函数库在这里github.com/iwowen/tuti…

我的博客地址在这里www.iwowen.cn/?p=71