从零开发前端工具库：用 Typescript 和 Rollup 构建

在现代前端开发中，工具库扮演着越来越重要的角色。它们可以帮助我们避免重复造轮子，提高开发效率和代码质量。如果你经常在项目中遇到重复的功能函数，那么将它们封装成一个工具库是一个明智的选择。本文将从头到尾指导你如何使用 Typescript 和 Rollup 开发一个前端工具库。

前期准备

安装依赖项

npm install -g typescript
npm install -g rollup

创建新项目

mkdir my-toolkit
cd my-toolkit
npm init -y

编写工具库

定义类型接口

首先，我们需要为工具库中的函数和数据结构定义类型接口。在 src/index.ts 中创建以下文件：

// src/index.ts
export interface MyFunctionArgs {
  param1: string;
  param2: number;
}

export function myFunction(args: MyFunctionArgs): string {
  // ...
}

编写函数和类

接下来，我们可以开始编写实际的函数和类。例如，让我们添加一个简单的 formatCurrency 函数：

// src/index.ts
export function formatCurrency(amount: number, currencySymbol?: string): string {
  // ...
}

导出模块

最后，我们需要导出模块，以便其他项目可以导入它。在 src/index.ts 文件的末尾添加以下行：

export * from './my-function';
export * from './format-currency';

构建工具库

安装 Rollup

Rollup 是一个用于捆绑 JavaScript 模块的工具。在我们的项目中安装它：

npm install --save-dev rollup

创建 Rollup 配置文件

在项目的根目录下创建一个名为 rollup.config.js 的文件，并添加以下配置：

// rollup.config.js
import typescript from 'rollup-plugin-typescript2';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/my-toolkit.js',
    format: 'umd',
    name: 'myToolkit',
  },
  plugins: [
    typescript(),
  ],
};

构建工具库

现在我们可以运行以下命令来构建工具库：

rollup -c

使用工具库

安装工具库

在其他项目中安装工具库：

npm install --save my-toolkit

导入工具库

在项目中导入工具库：

import { myFunction, formatCurrency } from 'my-toolkit';

使用函数

现在你可以使用工具库中的函数了：

const formattedAmount = formatCurrency(100, '
const formattedAmount = formatCurrency(100, '$');
#x27;);

结论

恭喜你！你现在已经使用 Typescript 和 Rollup 从零开发了一个前端工具库。通过遵循本文中的步骤，你可以创建自己的工具库来简化开发流程并提高代码质量。