1. 认识 Rollup：高性能打包工具

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 模块。它可以识别和处理模块之间的导入和导出语句，使你能够以模块化的方式组织你的代码。

javascript 复制代码

// 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"，这是一种优化技术，用于在打包时删除未使用的代码。这意味着你可以轻松剔除项目中未使用的代码，以减小生成的文件的大小。

javascript 复制代码

// 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: 该插件允许你为导入的模块创建别名，从而更轻松地处理文件路径和模块名称。

插件配置：

javascript 复制代码

// 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 等。

javascript 复制代码

// 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 被设计为具有高性能。它的构建速度相对较快，特别是在处理大型代码库时。
1. 快速构建速度： Rollup专注于 ES6 模块，能够更有效地分析和处理模块之间的依赖关系，因此在构建大型项目时通常比其他打包工具更快。
2. Tree-Shaking： Rollup 引入的 tree-shaking 技术允许删除未使用的代码，这显著减小了最终的输出文件大小。减小的文件大小意味着更快的加载时间，特别是对于用户访问速度较慢的网络连接而言。
3. 并行构建： Rollup 支持并行构建，可以同时处理多个模块，从而提高了构建的效率。这在多核处理器的计算机上尤其有用，可以更快地完成大型项目的构建过程。
4. 精简输出： Rollup 的输出文件通常更精简，因为它遵循 ES6 模块规范，不需要添加额外的运行时代码。这减小了文件大小，减少了不必要的代码复杂性，提高了性能。
5. 模块化分析： Rollup 能够进行更智能的模块化分析，这意味着只有在实际使用时才导入的模块会被包含，从而减少了构建中不必要的依赖项。
可扩展性： 你可以通过编写自定义插件来扩展 Rollup 的功能，以满足项目的特殊需求。

javascript 复制代码

// 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 的生态系统不断壮大，社区贡献了许多插件和工具，以满足不同项目的需求。这促进了工具的广泛应用。