`rollup` 和 `webpack` 对比

webpack是一个大而全的项目打包工具, 区分的自然要更细一些; 而作为一个新生代的库打包工具，rollup显得更加小巧精炼，可以根据不同的业务适配和技术栈适配进行打包。

和 webpack的颗粒度划分不同：

在 rollup中：统一将解析的插件成为 plugin。
在 webpack中：解析的插件有 plugin, loader。

plugin 是 rollup中重要的，按需构建的函数。使用不同的 plugin 能够解决不同的问题。

import { defineConfig } from 'rollup';

// 引入一个插件
import pg from '@babel/plugin-pg';

export default defineConfig({
  input: {
    'index': 'lib/index.js'
  },
  output: {
    format: 'umd',
    filename: 'dist/bundle.js'
  },
  plugins: [pg()]
});

一些常用的 rollup-plugin的介绍

rollup 3.x 的插件名称一般是 @rollup/plugin-{ pluginName } | rollup-plugin-{ pluginName }

@rollup/plugin-terser

@rollup/plugin-terser可以将源码进行压缩( collapseWhitespace ), 提纯处理 (removeComments)

@rollup/plugin-babel

@rollup/plugin-babel可以使用 Babel解析源码，将代码转化为浏览器兼容性更好的代码

注意：@rollup/plugin-babel需要配合 @babel/core 和 @babel/polyfill 使用。

# 使用 npm 安装
npm install --save-dev @rollup/plugin-babel @babel/core @babel/polyfill

yarn add --dev @rollup/plugin-babel @babel/core @babel/polyfill

@rollup/plugin-commonjs

当你的项目使用commonjs规范，并且需要引入其他的库时，你就需要使用@rollup/plugin-commonjs进行打包。

@rollup/plugin-node-resolve

当你的项目使用esModule规范，并且需要引入其他的库时，你就需要使用@rollup/plugin-node-resolve进行打包。

@rollup/plugin-typescript | rollup-plugin-typescript2

当你的项目使用typescript时，你就需要使用@rollup/plugin-node-typescript进行打包。

import { defineConfig } from 'rollup';

import typescript from '@rollup/plugin-node-typescript';

export default defineConfig({
  input: {
    'index': 'lib/index.ts'
  },
  output: {
    format: 'umd',
    filename: 'dist/bundle.js'
  },
  plugins: [
    typescript({
      compilerOptions: {
        lib: ['es5', 'es6', 'dom'],
        target: 'es5'
      }
    })
  ]
});

rollup-plugin-extensions

使用 rollup.js 时，模块之间的引入是不能省略后缀名( .js, .jsx, .ts, .tsx ), 也不能省略 index 引入。

为了开发便捷，你需要使用 rollup-plugin-extensions

// rollup.config.js
import extensions from 'rollup-plugin-extensions';
 
export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  plugins: [
    extensions({
      // Supporting Typescript files
      // Uses ".mjs, .js" by default
      extensions: ['.tsx', '.ts', '.jsx', '.js'],
      // Resolves index dir files based on supplied extensions
      // This is enable by default
      resolveIndex: true,
    })
  ]
};

rollup-plugin-vue | rollup-plugin-vue@next

需要写一个基于 Vue.js的库, 你需要使用 rollup-plugin-vue(for Vue2.x), rollup-plugin-vue@next(for Vue3.x)

import { defineConfig } from 'rollup';

import vuePlugin from 'rollup-plugin-vue';

/**
 * @see https://www.npmjs.com/package/rollup-plugin-extensions
 */
export default defineConfig({
  plugins: [
    vuePlugin(/* options */)
  ]
});

Rollup 插件浅谈

rollup 和 webpack 对比