在前段时间，Webpack 以其强大的功能和广泛的社区支持而成为了前端开发中最受欢迎的模块打包器。然而，新一代的打包工具 Rollup 也逐渐流行起来，因为它专注于构建 JavaScript 库和组件，以及针对用户端效果更好的优化。本文将向您介绍如何使用 Rollup 打包 ES6 模块，以及一些 Rollup 的特性。
安装 Rollup
首先，您需要安装 Node.js。然后，通过运行以下命令来在全局范围内安装 Rollup：
npm install --global rollup
或者，您也可以将 Rollup 安装在本地项目中：
npm install --save-dev rollup
创建 Rollup 配置文件
在您的项目根目录下创建一个名为 rollup.config.js 的文件，用来配置 Rollup 的行为。这个文件使用 CommonJS 格式导出一个 JavaScript 对象，指定您的入口文件、输出文件等信息。以下是一个基本的配置示例：
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
}
};
在这个示例中，input 字段指定了您的项目的入口文件路径，output 字段指定了打包后的文件路径和格式。这个示例中，我们将入口文件 src/main.js 打包成了一个 CommonJS 模块 dist/bundle.js。
使用插件
Rollup 还支持使用插件来处理您的模块。您可以通过在配置文件中的 plugins 字段中指定插件，来对您的模块做一些额外的处理。以下是一个使用 Babel 插件的配置示例：
import babel from 'rollup-plugin-babel';
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
},
plugins: [
babel()
]
};
在这个示例中，我们使用了 rollup-plugin-babel 插件来将 ES6 代码转换为 ES5，以确保在旧版浏览器中的兼容性。
打包您的模块
当您完成了配置文件的编写后，使用以下命令来运行 Rollup：
rollup --config
Rollup 将会根据您的配置文件执行打包操作，将您的模块打包成一个或多个 JavaScript 文件。
Rollup 的优势
相较于其他模块打包工具，Rollup 有以下几个优势：
- Tree-shaking：Rollup 可以通过静态分析的方式，从导入的模块中剔除未使用的代码，从而减小打包后文件的大小。
- 易于维护：Rollup 使用较少的配置，使得配置文件更加清晰和易于维护。
- 更好的性能：Rollup 专注于打包 JavaScript 库和组件，因此在构建结果上更加高效并具有更好的运行时效果。
结论
使用 Rollup 打包 ES6 模块可以帮助您构建出更小、更高效的代码库和组件。通过配置文件和插件的灵活配置，您可以完全控制打包的过程，确保获得最佳的打包结果。希望这篇简明指南可以帮助您入门 Rollup，并在您的项目中受益。
本文来自极简博客，作者：落花无声，转载请注明原文链接：使用Rollup打包ES6模块的简明指南
