Rollup + TypeScript，给你一种新的构建类型声明文件的方法

2024-01-01 21:04:52

初探 Rollup 和 TypeScript

Rollup

Rollup 是一个 JavaScript 模块打包器，它可以将多个 JavaScript 模块打包成一个或多个文件。Rollup 非常灵活，支持多种模块格式，例如 CommonJS、AMD、ES6 模块等。Rollup 还支持各种插件，可以扩展其功能，例如 Babel、PostCSS、UglifyJS 等。

TypeScript

TypeScript 是一个强类型的 JavaScript 超集，它可以帮助我们编写出更健壮、更易于维护的 JavaScript 代码。TypeScript 代码可以通过 TypeScript 编译器编译成 JavaScript 代码，然后就可以在浏览器或 Node.js 中运行。

为什么使用 Rollup 和 TypeScript 编译类型声明文件

传统上，我们使用 tsc 命令来编译 TypeScript 代码。tsc 命令可以生成 JavaScript 代码和类型声明文件。但是，tsc 命令生成的类型声明文件并不总是干净且易于维护。

Rollup 可以帮助我们生成更干净、更易于维护的类型声明文件。Rollup 可以将 TypeScript 代码编译成一个或多个 JavaScript 模块，然后使用 TypeScript 编译器将这些 JavaScript 模块编译成类型声明文件。这种方式可以使类型声明文件更具可读性和可维护性。

如何使用 Rollup 和 TypeScript 编译类型声明文件

1. 创建项目

首先，我们需要创建一个新的项目。我们可以使用以下命令来创建一个新的 Node.js 项目：

mkdir my-project
cd my-project
npm init -y

2. 安装 Rollup 和 TypeScript

接下来，我们需要安装 Rollup 和 TypeScript。我们可以使用以下命令来安装这两个库：

npm install --save-dev rollup typescript

3. 编写 TypeScript 代码

现在，我们可以开始编写 TypeScript 代码了。我们可以在 src 目录下创建一个 index.ts 文件，并在其中编写 TypeScript 代码。例如，我们可以编写以下代码：

// index.ts
export function add(a: number, b: number): number {
  return a + b;
}

4. 编写 Rollup 配置文件

接下来，我们需要编写 Rollup 配置文件。我们可以创建一个 rollup.config.js 文件，并在其中编写 Rollup 配置。例如，我们可以编写以下代码：

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

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