TypeScript Rollup简介和使用|极客教程

TypeScript Rollup简介和使用

Rollup简介

Rollup 是一个 JavaScript 模块打包器，专注于打包 ES 模块。它可以将多个模块打包成一个单独的文件，同时提供了 Tree-shaking 的能力，可以移除未被使用的代码。Rollup 的目标是尽可能地简单、高效和快速。

相对于其他打包器如 Webpack 和 Parcel，Rollup 更适合用于构建库和工具。它的配置灵活并且易于理解，打包结果更加精简，适用于生产环境。

TypeScript 和 Rollup 结合使用

TypeScript 是一个由微软开发的开源编程语言，它是 JavaScript 的一个超集，添加了类型系统支持。结合 TypeScript 和 Rollup 可以提供更强大的代码提示和错误检测，同时还可以使用最新的 ECMAScript 特性，并最终将多个 TypeScript 模块打包成一个纯 JavaScript 文件。

接下来，我们将介绍如何使用 Rollup 和 TypeScript 结合进行项目构建。

步骤

1. 初始化项目

首先，在一个空文件夹中运行以下命令初始化项目：

npm init -y

2. 安装依赖

安装 Rollup 和 TypeScript：

npm install rollup rollup-plugin-typescript2 typescript --save-dev

3. 创建 TypeScript 配置文件

在项目根目录下创建 tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "strict": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

4. 创建 TypeScript 文件

在项目中创建 src 文件夹，并在其中创建一个简单的 TypeScript 文件 index.ts：

export const greet = (name: string): string => {
  return `Hello, ${name}!`;
};

5. 创建 Rollup 配置文件

在项目根目录下创建 rollup.config.js 文件：

import typescript from "rollup-plugin-typescript2";

export default {
  input: "src/index.ts",
  output: {
    file: "dist/bundle.js",
    format: "iife",
    name: "MyLibrary"
  },
  plugins: [
    typescript({
      tsconfig: "tsconfig.json"
    })
  ]
};