rollup & api-extractor 打包发布库的技巧和注意事项

前端

2023-11-05 13:16:51

背景

随着前端项目的日益复杂，代码的复用变得越来越重要，这不仅可以提高开发效率，还可以保证代码的一致性和可靠性。而类库作为一种代码复用的有效手段，也得到了广泛的应用。

简介

rollup 是一个流行的 JavaScript 模块打包工具，它可以将多个 JavaScript 模块打包成一个或多个文件，以方便在浏览器或 Node.js 中使用。

API Extractor 是一个用于提取 TypeScript 代码的 API 文档的工具，它可以帮助开发人员生成完整的 API 文档，以方便其他开发人员理解和使用类库。

步骤

1. 项目初始化

首先，我们需要创建一个新的 TypeScript 项目，并安装必要的依赖项：

mkdir my-library
cd my-library
npm init -y
npm install typescript rollup api-extractor

2. 创建代码

接下来，我们需要创建我们的类库代码。在本例中，我们将创建一个简单的计算器类库：

export class Calculator {
  add(a: number, b: number): number {
    return a + b;
  }

  subtract(a: number, b: number): number {
    return a - b;
  }

  multiply(a: number, b: number): number {
    return a * b;
  }

  divide(a: number, b: number): number {
    return a / b;
  }
}

3. 配置 Rollup

接下来，我们需要配置 Rollup 以便它可以将我们的代码打包成一个 JavaScript 文件。为此，我们需要在项目中创建一个 rollup.config.js 文件：

import typescript from "@rollup/plugin-typescript";

export default {
  input: "src/index.ts",
  output: {
    file: "dist/index.js",
    format: "umd",
  },
  plugins: [
    typescript(),
  ],
};

4. 配置 API Extractor

接下来，我们需要配置 API Extractor 以便它可以提取我们的代码的 API 文档。为此，我们需要在项目中创建一个 api-extractor.json 文件：

{
  "project": {
    "name": "my-library",
    "root": "src",
    "tsconfig": "tsconfig.json",
    "entryPoints": [
      "./src/index.ts"
    ],
    "mainEntryPointFilePath": "src/index.ts",
  },
  "apiReport": {
    "enabled": true,
    "reportFileName": "docs/api-report.md"
  }
}