Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。

允许我们以ES6来进行库的开发，通常我们用Webpack来打包应用类的项目，而使用来打包库类型的项目，因为可以使我们的库更加简洁，毕竟人家的Slogan是:

快速上手

安装

npm install --global rollup

提供两种方式来使用：和

使用查看使用命令及相关参数。

基本使用命令：

rollup [options] 

如打包一个支持Commonjs的文件：

rollup main.js --file bundle.js --format cjs

可以使用库来初始化项目

配置文件

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

上面是最基础的配置，指定打包入口和输出文件名称及类型

另外针对处理输入文件和处理输出文件都提供了相应的插件。

如官方实例：

import json from 'rollup-plugin-json';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [ json() ]
}

另外我们也可以使用插件对输出文件进行处理，如使用对打包文件进行压缩：

yarn add -D rollup-plugin-terser

配置：

import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/main.js',
  output: [
    { file: 'bundle.js', format: 'cjs' },
    { file: 'bundle.min.js', format: 'iife', name: 'version', plugin: [terser()] }
  ]
}

另外，上面的配置文件默认一种打包配置，也可以指定多种打包配置，如：

export default [
  // browser-friendly UMD build
  {
    input: 'src/index.ts',
    output: {
      name: 'test',
      file: pkg.browser,
      format: 'umd'
    },
    plugins: [
      commonjs(), // so Rollup can convert `ms` to an ES module
      typescript(), // so Rollup can convert TypeScript to js
    ]
  },

  {
    input: 'src/index.ts',
    plugins: [
      typescript(), // so Rollup can convert TypeScript to js
    ],
    output: [
      { file: pkg.main, format: 'cjs' },
      { file: pkg.module, format: 'es' }
    ]
  }
];

搭配React + TypeScript

增加TypeScript支持

首先安装TS相关依赖：

yard add -D rollup-plugin-typescript ts-node tslib typescript

:

import typescript from 'rollup-plugin-typescript';
export default { 
  plugins: [ typescript() ]
}

在项目目录下增加文件，具体配置参考：

搭配antd的babel-plugin-import使用

安装插件和

import babel from 'rollup-plugin-babel';
export default { 
  //plugins: [ babel() ]
  plugins: [
    babel({
      exclude: 'node_modules/**',
      extensions: ['.jsx', '.tsx', '.js', '.ts']
    })
  ]
}

更详细使用文档参考：及

总体来说，上手还是比较方便的，第一次用来打包业务的通用模块，体验很好，后续会继续研究，毕竟业务中通用库都倡导使用来打包，以保证更小的包体积。