Rollup的优势

在最新的Vue3版本中，也使用了rollup作为打包工具。相比于webpack，rollup要轻量许多，用于弥补gulp的无tree-shaking是很好的选择，最大的用途是打包生产一个库文件，比如sdk.js之类。虽然webpack也可以做到，但是webpack较重，打包后的文件有部分webpack内部代码，如__webpack__require之类的函数定义，给人一种不干净的感觉。而rollup打出来的包就很干净，没有其他冗余代码。

使用方法

一、安装rollup

<code>npm i rollup -g/<code>

二、几种使用方式

1、命令行运行

<code>rollup src/main.js -o rel/bundle.js  -f cjs //将main.js(es5)编译输出至bundle.js(commonjs)/<code>

2、配置文件形式

<code>//新建一个rollup.config.js 
export default {
  input: 'src/main.js',  // 入口文件
  output: {  // 输出 options
    file: 'bundle.js',  // 输出文件名
    format: 'cjs'       // 输出格式
  }
}

//执行
rollup -c   //当你的配置文件另有其名(dev),执行 rollup -c rollup.config.dev.js/<code>

3、模块形式(方便配合gulp等其他工具)

<code>//rollup.config.js 
var rollup = require( 'rollup' );
var babel = require('rollup-plugin-babel');

rollup.rollup({
    entry: 'src/main.js',
    plugins: [ babel() ]
}).then( function ( bundle ) { 

    bundle.write({
        format: 'umd',
        moduleName: 'main', //umd或iife模式下，若入口文件含 export，必须加上该属性
        dest: 'rel/bundle.js'
    });
});

//命令行执行
node rollup.config.js/<code>

相关配置说明

一、input

入口文件地址

二、output

<code>output:{
    file:'bundle.js', // 输出文件
    format: 'cjs,  //  五种输出格式：amd /  es6 / iife / umd / cjs
    name:'A',  //当format为iife和umd时必须提供，将作为全局变量挂在window(浏览器环境)下：window.A=...
    sourcemap:true  //生成bundle.map.js文件，方便调试
}/<code>

三、plugins

最常用的就是babel插件了,比较不爽的是，babel 的预设不像 webpack 可以直接写在配置文件里，而还是得独立写个“src/.babelrc”（注意我们可以写在 src 下，而不是非得放在项目根目录下），还得确保装了插件：npm i rollup-plugin-babel

<code>//rollup.config.js 
import babel from 'rollup-plugin-babel';
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [ // 增加 plugins
    babel({
      exclude: 'node_modules/**' // 不对node_modules进行编译
    })
  ]
}

//.babelrc
{
  "presets": [
    ["@babel/env", {"modules": false}]
  ]
}/<code>

四、external

<code>external: ['react', 'redux'],// 告诉rollup，不打包react,redux;将其视为外部依赖/<code>

五、global

<code>globals: {
  react: 'React', // 这跟external 是配套使用的，指明global.React即是外部依赖react
  redux: 'Redux'
}/<code>

主要依赖包

rollup无法识别node_modules中的包，需要安装插件rollup-plugin-node-resolve，然后在plugins中使用。

node_modules中的包大部分都是commonjs格式的，要在rollup中使用必须先转为ES6语法，为此需要安装插件 rollup-plugin-commonjs。

附一份react-redux开源项目的rollup配置文件

<code>import nodeResolve from 'rollup-plugin-node-resolve' // 帮助寻找node_modules里的包
import babel from 'rollup-plugin-babel'  // rollup 的 babel 插件，ES6转ES5
import replace from 'rollup-plugin-replace' // 替换待打包文件里的一些变量，如 process在浏览器端是不存在的，需要被替换
import commonjs from 'rollup-plugin-commonjs' // 将非ES6语法的包转为ES6可用
import uglify from 'rollup-plugin-uglify'  // 压缩包

const env = process.env.NODE_ENV

const config = {
  input: 'src/index.js',
  external: ['react', 'redux'],  // 告诉rollup，不打包react,redux;将其视为外部依赖
  output: { 
    format: 'umd', // 输出 ＵＭＤ格式，各种模块规范通用
    name: 'ReactRedux',　// 打包后的全局变量，如浏览器端 window.ReactRedux　
    globals: {
      react: 'React',   // 这跟external 是配套使用的，指明global.React即是外部依赖react
      redux: 'Redux'
    }
  },
  plugins: [
    nodeResolve(),
    babel({
      exclude: '**/node_modules/**'
    }),
    replace({
      'process.env.NODE_ENV': JSON.stringify(env)
    }),
    commonjs()
  ]
}

if (env === 'production') {
  config.plugins.push(
    uglify({
      compress: { 

        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        warnings: false
      }
    })
  )
}

export default config/<code>