从头到尾使用 Rollup 打包 TS 文件

如何使用 Rollup 从头到尾打包 TypeScript 文件

入门

随着 TypeScript 在大型项目的广泛应用，迫切需要一种有效的打包和管理 TypeScript 代码的方法。Rollup，一个流行的模块打包器，特别适合于此任务。本指南将逐步介绍如何利用 Rollup 从头到尾打包 TypeScript 文件。

准备工作

在继续之前，请确保您的系统满足以下条件：

• Node.js 10 或更高版本
• npm 或 yarn 包管理器

安装依赖项

首先，通过以下命令安装 Rollup 和 TypeScript 编译器：

npm install --save-dev rollup typescript

配置 Rollup

接下来，创建一个 Rollup 配置文件（rollup.config.js）以定义打包配置：

import typescript from 'rollup-plugin-typescript2';

export default {
  input: 'src/index.ts', // 入口文件
  output: {
    file: 'dist/bundle.js', // 输出文件
    format: 'umd', // 模块格式
    name: 'myBundle' // 全局变量名
  },
  plugins: [
    typescript() // TypeScript 编译器插件
  ]
};

编译 TypeScript

Rollup 配置完成后，使用以下命令编译 TypeScript 代码：

rollup -c

这将生成一个优化的 JavaScript 文件 bundle.js。

进阶选项

除了基本打包功能，Rollup 还提供了许多高级选项：

• Source Maps: 生成 source map 以调试原始 TypeScript 代码。
• 代码拆分: 将大型应用程序拆分成更小的块。
• 插件: 扩展 Rollup 功能，支持其他模块格式或执行代码转换。

技术指南

步骤 1：安装依赖项

npm install --save-dev rollup typescript

步骤 2：配置 Rollup

创建 rollup.config.js 文件：

import typescript from 'rollup-plugin-typescript2';

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

步骤 3：编译 TypeScript

rollup -c

步骤 4：使用 Source Map

在 rollup.config.js 中添加：

sourceMap: true,

步骤 5：代码拆分

在 rollup.config.js 中添加：

output: {
  ...
  chunkFileNames: '[name].js'
}

总结

使用 Rollup 打包 TypeScript 代码是一个强大的技术，可以显著提升 JavaScript 应用程序的性能和可维护性。按照本指南中的步骤操作，您可以轻松打包 TypeScript 代码，并充分利用 Rollup 的诸多优势。

常见问题解答

1. 如何在 Rollup 中使用其他模块格式？
通过安装相应的插件，例如 rollup-plugin-commonjs 或 rollup-plugin-node-resolve。

2. 代码拆分有哪些优势？
提高应用程序加载速度、减少网络请求数量、改善缓存。

3. 如何调试使用 Rollup 打包的代码？
使用 Source Maps 将调试信息映射到原始 TypeScript 代码。

4. Rollup 与 Webpack 有什么区别？
Rollup 适用于小型到中型的项目，而 Webpack 更适合大型且复杂的项目。

5. Rollup 中有哪些常见的插件？
typescript、babel、terser 和 commonjs。