深入解析Rollup必备配置：助力你高效打包项目

前端

2023-09-03 22:32:13

Rollup：JavaScript 模块打包的终极指南

作为一名 JavaScript 开发人员，你是否经常为代码打包感到头疼？如果你正在寻找一种方法来优化你的代码，提升加载速度，那么 Rollup 就是你的理想选择。

什么是 Rollup？

Rollup 是一款 JavaScript 模块打包工具，它能够将多个模块打包成一个单独的文件，方便浏览器使用。与其他打包工具不同，Rollup 专注于生成更小、更快速的代码，从而提升你的应用性能。

Rollup 常用配置指南

1. 输入与输出配置

input： 指定模块的入口文件，也就是你项目的起点。
output： 指定打包后的输出文件，可以是 .js、.css 或其他格式。

2. 格式设置

format： 指定输出文件的格式，例如 CommonJS、ESModule 等。
sourcemap： 决定是否生成 SourceMap 文件，以便调试和错误追踪。

3. 插件选择

Rollup 提供了一系列插件，可以增强其功能：

babel： 支持 ES2015+ 语法，让你可以使用最新的 JavaScript 特性。
terser： 代码压缩工具，可以减小输出文件的大小。
commonjs： 支持 CommonJS 模块，如果你使用的是 Node.js 模块。

4. 高级配置

external： 排除外部依赖项，例如 jQuery 或 React，因为它们已经在页面上加载了。
globals： 指定全局变量，例如 window 或 document。
watch： 监听文件改动并自动重新打包，非常适合开发阶段。

5. 使用示例

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from "rollup-plugin-terser";

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife',
        sourcemap: true
    },
    plugins: [
        resolve(),
        commonjs(),
        terser()
    ]
};