Rollup 是一个现代 JavaScript 模块打包东西，用于将多个模块或文件合并为一个或多个独自的输出文件。它与类似的东西如Webpack和Parcel不同，Rollup 专心于 ES6 模块（也称为 ESM，ECMAScript 模块）。
Rollup 的前期版别于 2015 年初次发布，开始是由 Rich Harris 创立的。开始版别的方针是支撑 ES6 模块，因为当时 ES6 模块标准正逐渐被选用。Rollup 始终专心于 ES6 模块，并强调了模块化的开发方法。
Tree-shaking 是由 Rollup 打包东西的创始人之一 Rich Harris 初次引进和开发的，他在前期版别中引进这一技能使得 Rollup 在功能和包巨细优化方面具有竞争优势，答应开发者在打包时除掉未运用的代码，然后减小输出文件的巨细。Tree-shaking 技能的创新和运用并推动了其在前端开发领域的广泛运用。
为什么用Rollup？
- 简化学习曲线： Rollup 相关于 Webpack 来说学习曲线更平缓，特别适宜想要快速上手打包东西的开发者。学习 Rollup 能够更快地了解其概念和装备方法，然后提高开发功率。
- 更轻量级装备： Rollup 的装备相对简单，不需求处理大量杂乱的装备选项，这使得项目的装备管理更为便捷，减少了出错的可能性，特别适宜初学者或许对装备要求不高的开发者。
- 专心于模块打包： Rollup 首要专心于模块打包，特别适宜对模块化开发有需求的项目。相关于杂乱的运用场景，Rollup 供给了更纯粹、高效的模块打包解决方案。
- 适用于小型项目： Rollup 由于其轻量级特性，更适宜处理小型项目的打包需求，能够供给更快的打包速度和更小的输出文件，特别适宜对功能要求较高的运用。
- 可定制性高： Rollup 的插件体系灵敏，能够根据项目的需求进行定制开发，满意特定的打包需求，这使得 Rollup 适用于需求定制化打包解决方案的开发者。
尽管 Webpack 是一个功能强壮的构建东西，但关于一些特定的运用场景，特别是关于需求快速上手、简化装备和专心模块打包的项目来说，Rollup 是更加适宜的选择。如果你期望快速把握一种轻量级且专心于模块打包的东西，那么学习 Rollup 是一个正确的选择。
Rollup首要特性
- ES6 模块支撑： Rollup 开始设计用于处理 ES6 模块。它能够识别和处理模块之间的导入和导出语句，使你能够以模块化的方法安排你的代码。
// Module A - a.js
export const a = 10;
// Module B - b.js
import { a } from './a.js';
console.log(a); // 输出 10
- Tree-Shaking： Rollup 被广泛用于进行 “tree-shaking”，这是一种优化技能，用于在打包时删去未运用的代码。这意味着你能够轻松除掉项目中未运用的代码，以减小生成的文件的巨细。
// Module A - a.js
export const a = 10;
export const b = 20;
// Module B - b.js
import { a } from './a.js';
console.log(a); // 输出 10，但未运用 b 变量，所以不会被打包
- 插件体系： Rollup 具有强壮的插件体系，答应你经过各种插件来自定义打包进程，处理文件格局转换、紧缩、添加 banner/footer、动态导入等等。
常见Rollup插件有：
- rollup-plugin-babel: 这个插件答应你在 Rollup 构建进程中运用 Babel 转译 JavaScript 代码，使你能够运用最新的 ECMAScript 特性，并将代码转换为浏览器兼容的格局。
- rollup-plugin-node-resolve: 该插件用于解析 Node.js 模块，使你能够轻松导入依靠模块，特别是关于第三方库的导入十分有用。
- rollup-plugin-commonjs: CommonJS 插件答应你在 Rollup 中运用 CommonJS 格局的模块。这关于将旧的 CommonJS 模块整合到你的 ES6 项目中十分有用。
- rollup-plugin-terser: 这个插件用于紧缩 JavaScript 代码，以减小生成的文件巨细，提高加载功能。它运用 Terser 紧缩器进行代码紧缩。
- rollup-plugin-postcss: PostCSS 插件能够处理 CSS 文件，答应你在 Rollup 构建中运用 PostCSS 插件，例如 Autoprefixer、CSS Modules 等。
- rollup-plugin-scss: 这个插件用于处理 SCSS 文件，将其编译成 CSS 并集成到 Rollup 构建中。
- rollup-plugin-json: JSON 插件答应你导入 JSON 文件作为模块，十分有用，特别是在处理装备文件或数据文件时。
- rollup-plugin-image: 图画插件能够帮助你导入图画文件，例如 PNG、JPEG，然后将它们嵌入到生成的 JavaScript 文件中。
- rollup-plugin-replace: 替换插件答应你在构建进程中替换源代码中的文本。这在处理环境变量、装备或特定标志时十分有用。
- rollup-plugin-alias: 该插件答应你为导入的模块创立别号，然后更轻松地处理文件路径和模块名称。
插件装备：
// rollup.config.js
import { terser } from 'rollup-plugin-terser';
export default {
input: 'main.js',
output: {
file: 'bundle.js',
format: 'iife',
},
plugins: [terser()], //紧缩代码
};
- 多种输出格局： Rollup 支撑将你的代码打包成不同的输出格局，包括 CommonJS、AMD、UMD、ES6 模块等，这使得它适用于各种运用场景，包括浏览器、Node.js 等。
// rollup.config.js
export default {
input: 'main.js',
output: [
{
file: 'bundle-cjs.js',
format: 'cjs',
},
{
file: 'bundle-esm.js',
format: 'esm',
},
{
file: 'bundle-umd.js',
format: 'umd',
name: 'myLibrary',
},
],
};
-
高功能： Rollup 被设计为具有高功能。它的构建速度相对较快，特别是在处理大型代码库时。
- 快速构建速度： Rollup专心于 ES6 模块，能够更有效地分析和处理模块之间的依靠关系，因此在构建大型项目时一般比其他打包东西更快。
- Tree-Shaking： Rollup 引进的 tree-shaking 技能答应删去未运用的代码，这明显减小了终究的输出文件巨细。减小的文件巨细意味着更快的加载时间，特别是关于用户访问速度较慢的网络连接而言。
- 并行构建： Rollup 支撑并行构建，能够同时处理多个模块，然后提高了构建的功率。这在多核处理器的计算机上特别有用，能够更快地完结大型项目的构建进程。
- 精简输出： Rollup 的输出文件一般更精简，因为它遵循 ES6 模块标准，不需求添加额定的运行时代码。这减小了文件巨细，减少了不必要的代码杂乱性，提高了功能。
- 模块化分析： Rollup 能够进行更智能的模块化分析，这意味着只有在实际运用时才导入的模块会被包括，然后减少了构建中不必要的依靠项。
-
可扩展性： 你能够经过编写自定义插件来扩展 Rollup 的功能，以满意项目的特殊需求。
// custom-replace-plugin.js
export default function customReplacePlugin(options) {
const { find, replace } = options;
return {
transform(code, id) {
if (id.endsWith('.js')) {
// 主动替换 JavaScript 代码中的find字符串为replace字符串
const transformedCode = code.replace(new RegExp(find, 'g'), replace);
return { code: transformedCode };
}
},
};
}
// rollup.config.js
import customPlugin from './rollup-plugin-custom';
export default {
input: 'main.js',
output: {
file: 'bundle.js',
format: 'iife',
},
plugins: [customPlugin()],
};
总之，Rollup 是一个强壮的 JavaScript 模块打包东西，特别适宜那些期望使用 ES6 模块体系和 tree-shaking 策略来构建现代、高功能运用程序的开发者。它的简单装备和高功能使其成为一个受欢迎的选择，特别是在构建库和组件时。跟着Rollup 的生态体系不断强大，社区贡献了许多插件和东西，以满意不同项目的需求。这促进了东西的广泛运用。
