Rollup 快速上手指南

在当今的前端开发领域，Rollup 作为一款出色的模块打包工具，正受到越来越多开发者的青睐。如果你还没有尝试过使用 Rollup，那么这篇快速上手指南将助你轻松入门。

让我们来了解一下 Rollup 是什么。Rollup 是一个 JavaScript 模块打包器，它专注于 ES 模块，并能够生成高效、简洁的代码包。与其他打包工具相比，Rollup 在处理代码的树摇和代码分割方面表现出色。

要开始使用 Rollup，第一步是进行安装。你可以通过 npm 或 yarn 来安装 Rollup。在终端中运行以下命令：

npm install rollup --save-dev

或者

yarn add rollup -D

安装完成后，接下来创建一个配置文件 rollup.config.js 。在这个配置文件中，你需要指定输入和输出的相关选项。

export default {
  input:'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'umd'
  }
};

上述配置中，input 指明了入口文件的路径，output 中的 file 定义了输出文件的名称，format 则指定了输出的模块格式，这里选择了 umd 格式，以支持在多种环境中使用。

然后，在项目的根目录下运行 Rollup 命令来进行打包。

npx rollup -c

Rollup 还支持各种插件来扩展其功能。例如，如果你需要处理 CSS 文件，可以安装 rollup-plugin-postcss 插件。

在开发过程中，结合使用 rollup-watch 插件可以实现实时监听文件的修改并自动重新打包，大大提高开发效率。

另外，对于代码分割，Rollup 也提供了便捷的方式。通过动态导入和配置相关选项，能够将大型应用拆分成多个小的代码块，从而提高应用的加载性能。

Rollup 以其简洁高效的特点，为前端开发的打包工作带来了全新的体验。通过以上简单的步骤，相信你已经能够初步掌握 Rollup 的使用，快去尝试在你的项目中运用它吧！