Written by Qizheng Han
on 

Rollup is kind of different.

最近的工作用到了rollup， 正好在这里记录学习一下。

什么是Rollup

先按照惯例给出官方的定义

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. This will eventually be possible natively everywhere, but Rollup lets you do it today.

简单的翻译一下：

Rollup是一个用于JavaScript的模块打包工具，它将小块代码编译成更大、更复杂的库或应用程序。它使用ES6版本中包含的新的标准化代码模块格式，而不是之前的特定解决方案，如CommonJS和AMD。ES模块允许您自由无缝地组合来自您喜爱的库的最有用的个别函数。这种能力最终将在所有地方实现本地支持，但是Rollup让您可以立即使用它。

为什么要用Rollup

因为最近在搞低代码，对于低代码的产物（我们暂时认为是出码以后的代码），我需要将产物打包发布npm，这样其他人就可以使用了。但是我们的产物是一个单独的ts文件，在真的发布npm包之前需要先打包。

谈到打包工具肯定第一印象肯定是webpack，你也肯定在想，我选择rollup是因为他的小巧。

但是，rollup的小巧是什么意思呢？

Rollup小巧在哪里呢？

更简单的配置和使用

我们来看看相同的简单场景，webpack 和 rollup 在配置文件上的差异：

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

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

你可以看到，Webpack 的配置相对更复杂一些。这是因为 Webpack 不仅仅是一个 JavaScript 模块打包器，它也可以处理各种类型的资源，如 CSS、图片等，因此需要更详细的配置。而 Rollup 的设计目标主要是高效地打包 JavaScript，因此它的配置更简洁。

tree shaking让产物更小巧

Rollup 利用了 ES6 模块的静态结构特性，实现了一个称为”tree-shaking”的功能。”Tree-shaking”能够剔除那些在代码中没有被实际使用的部分，从而使得生成的打包文件更小，这也是 Rollup 被称为”小巧”的一个重要原因。

假设现在有一段这样的代码，将其进行打包：

// module.js
export const used = 'This is used';
export const unused = 'This is unused';

// main.js
import { used } from './module.js';
console.log(used);

如果交给webpack打包，那么打包出来的文件是这样的：

/***/ "./module.js":
/*!******************!*\
  !*** ./module.js ***!
  \******************/
/*! exports provided: used, unused */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"used\", function() { return used; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"unused\", function() { return unused; });\nconst used = 'This is used';\nconst unused = 'This is unused';\n\n\n//# sourceURL=webpack:///./module.js?");

/***/ }),

如果使用rollup进行打包，得到的结果是这样子的，可以看到，rollup将没有使用的代码直接删除了。但是代码依然是ES6的模块化代码。 这个是因为我们还没有给rollup配置babel，如果我们给rollup配置babel，那么就会得到一个ES5的代码。

// bundle.js (Rollup)
const used = 'This is used';
console.log(used);

这里的小巧，是说tree shaking去掉了不用的代码，简化了本身需要打包的代码，不代表打包后的代码量少。

当然webpack也是支持tree shaking的。

webpack 运行时

在项目的配置文件中（如 webpack.config.js），你需要定义 entry（入口文件）、output（输出文件）、loader（加载器）、plugin（插件）等相关配置。这些配置会告诉 webpack 如何进行打包，并在运行时应用这些配置。

另外，webpack 在打包生成的文件中也会包含运行时代码。这些代码负责模块的加载、解析和执行。在使用 webpack 打包的项目中，你需要在 HTML 文件或其他入口文件中引入生成的 bundle 文件，同时也会引入 webpack 的运行时代码。这个运行时代码会在浏览器或 Node.js 环境中执行，以确保模块的正确加载和执行。

你肯定想知道与webpack的区别

Rollup

Rollup 的设计目标是提供简洁和高效的打包，特别是用于库和框架。其主要特性和优势是对 ES6 模块的原生支持和 tree shaking。

优势

ES6模块的原生支持：Rollup 从一开始就是为 ES6 模块设计的，这让它可以利用 JavaScript 的静态模块结构进行优化。

// add.js
export function add(a, b) {
    return a + b;
}

// main.js
import { add } from './add.js';
console.log(add(1, 2));

在这个例子中，Rollup 可以精确地知道 add 函数是被导入并使用的，而其他未使用的导出则会被忽略。

Tree shaking：由于 Rollup 使用 ES6 模块，它可以进行 tree shaking，也就是删除那些导入但未实际使用的代码。

// utils.js
export function method1() { /*...*/ }
export function method2() { /*...*/ }

// main.js
import { method1 } from './utils.js';
method1();

在这个例子中，即使 utils.js 文件中定义了两个方法，但只有 method1 在 main.js 中被导入并使用，因此 Rollup 会在打包结果中排除 method2。

劣势

功能较少：相比于 Webpack，Rollup 的功能较为基础，例如没有内置的代码拆分和动态导入处理。

插件系统：尽管 Rollup 提供了一个插件系统来增强其功能，但这需要开发者额外学习和配置。

擅长的场景：由于 Rollup 的优化策略和简洁设计，它特别适合打包库和框架。例如，Vue.js 和 React 等主流框架都使用 Rollup 进行打包。

webpack

webpack的优势不用多说，功能之强大是rollup等无法比拟的。更适合大型的项目。

但同时也拥有一定的劣势：

参考