简介

Rollup是一款ES Module打包器，它可以将项目中散落的细小模块打包为整体代码，从而使这些划分的模块可以更好地运行在浏览器环境或node.Js环境。从作用上来看，Rollup与webpack非常类似，不过相对于webpack，rollup要小巧的多。webpack在配合一些插件的使用下，几乎可以完成前端工程化的大多数工作，适合开发项目。而rollup适合开发sdk和一些框架。

初步使用

安装： npm install rollup -D
检查yarn版本： npm info yarn
打包： yarn rollup ./src/index.js

编写配置文件

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife',
        name: 'xxxdemo', // 用于指定库的名称
        sourcemap: true， // 快速定位bug
   
    }
}

运行打包： yarn rollup --config 会报错，根据提示可知要在package.json 中加入 type: 'module' 再次运行

插件的使用

rollup-plugin-json

目的：可以在开发时引入并处理json文件
安装：yarn add rollup-plugin-json --dev
引入：在rollup.config.js中

import json from 'rollup-plugin-json' // 默认导出的是一个插件函数

export default {
    plugins: [
        json()
    ]
}

使用,比如引入package.json

import {version, license} from '../package.json'

console.log(version)

运行打包： yarn rollup --config 正常

rollup-plugin-node-resolve

目的：引入并使用npm包
安装： yarn add rollup-plugin-node-resolve --dev
引入：在rollup.config.js中

import nodeResolve from 'rollup-plugin-node-resolve'

export default {
    plugins: [
        nodeResolve()
    ]
}

使用： yarn add lodash-es（注意：这里要lodash-es）

import _ from 'lodash-es'
console.log(_.indexOf([1,2],2))

打包：yarn rollup --config

rollup-plugin-commonjs

目的：加载commonjs模块
安装： yarn add rollup-plugin-commonjs --dev
引入:

import commonjs from 'rollup-plugin-commonjs'

export default {
    plugins: [
        commonjs()
    ]
}

使用: 创建cjs.module.js

module.exports= {
    foo: 'bar'
}

在index.js中

import cjs from './utils/cjs.module'
log(cjs)

打包：yarn rollup --config

@rollup/plugin-babel

目的：能将打包的代码由es6降级为es5
安装：除了安装上述插件外，还需要安装@babel/core; @babel/preset-env
引入：

import babel from '@rollup/plugin-babel'

export default {
    plugins: [
        babel({
            extensions: [".js", ".ts"],
            babelHelpers: "bundled",
            presets: [
                [
                    "@babel/env",
                    {
                        targets: {
                            browsers: ["> 1%", "last 2 versions", "not ie <= 8"],
                        },
                    },
                ],
            ],
        }),
    ]
}

使用：打包后的代码为es5

代码拆分

修改config文件

export default {
    output: {
        dir: 'dist'，
        format: 'amd'
    }
}

使用

import('./utils/log').then(module => {
    console.log(module)
})

打包，出现两个文件

多入口打包

修改配置：在config.js 中

input: ['src/index.js', 'src/index2.js'],
 output: {
        dir: 'dist'，
        format: 'amd'
    }

打包
测试：

    <script src="https://unpkg.com/requirejs@2.3.6/require.js" data-main="./dist/index.js"></script>

开发时，监听模块变化，随时打包 watch

在rollup文件夹下创建dev.cjs文件
编写dev.cjs

const { babel } = require('@rollup/plugin-babel')
const rollup = require('rollup')

const watchOptions =  {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife',
        name: 'rollupDemo',
        sourcemap: true
    },
    plugins: [
        babel({
            extensions: [".js", ".ts"],
            babelHelpers: "bundled",
            presets: [
                [
                    "@babel/env",
                    {
                        targets: {
                            browsers: ["> 1%", "last 2 versions", "not ie <= 8"],
                        },
                    },
                ],
            ],
        }),
    ]
}

rollup.watch(watchOptions)
console.log('rollup watching------')

在package.json 中

"scripts": {
    "dev": "node rollup/dev.cjs"
  },

执行npm run dev, 改变文件内容，自动打包

总结：

优势：

输出结果更加扁平
自动移除未引用代码，treeshaking
打包结果依然完全可读

劣势：

加载非esm的第三方模块比较复杂
模块最终都被打包到一个函数中，无法实现HMR
浏览器环境中，代码拆分功能依赖amd库

所以：

webpack大而全，适合开发应用程序；rollup小而美，适合开发库和框架

参考文档：

segmentfault.com/a/119000004…

使用Rollup打包sdk

简介