Rollup的使用

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码。相对于webpack，Rollup更加小巧。
大多数知名框架/库都在使用Rollup作为模块打包器,如vue、react、 three.js、moment等。

rollup的安装

yarn add rollup --dev

rollup的使用

• 安装完成后node_modules/.bin中会自动添加相应的rollup程序，我们就可以在命令行中通过yarn rollup的方式来运行。

• 创建rollup.config.js文件

  rollup.config.js文件是主文件，文件中我们定义相应配置来完成我们的需求。也可以指定与默认 rollup.config.js 文件不同的配置文件：rollup.config.dev.js、rollup.config.prod.js。

• 配置rollup.config.js文件

1. 单文件打包

	export default {
    	input: 'src/index.js', // 输入文件(单入口打包)
    	output: { // 输出文件
        	file: 'dist/bundle.js', // 单个文件输出方式
        	format: 'iife' // 输出格式
    	},
    	// plugins为一个数组，插件是rollup唯一扩展途径
    	plugins: []
	}

2. 多文件打包

   input可以改为数组模式或者对象的形式。
   file只能输出单个文件，输出多个需要使用dir。
   format的iife立即执行函数会将所有模块放入同一个函数，无法实现代码拆分，需使用amd或commonjs标准。

	export default {
		input:['src/index.js','src/album.js'], // 多入口打包，数组模式
		output: { 
        	dir: 'dist', // 输出多个需要使用dir
        	format: 'amd'
    	},
    	// plugins为一个数组，插件是rollup唯一扩展途径
    	plugins: []
    }

	export default {
		input:{ // 多入口打包，对象模式
        	foo: 'src/index.js',
        	bar: 'src/album.js'
    	}
		output: { 
        	dir: 'dist',
        	format: 'amd'
    	},
    	// plugins为一个数组，插件是rollup唯一扩展途径
    	plugins: []
    }

运行yarn rollup --config 会默认执行rollup.config.js文件，也可以通过yarn rollup --config rollup.config.dev.js命令，来针对不同的环境使用不同的配置。

rollup插件的使用

rollup并不像其他打包工具有多种扩展方式，插件是rollup唯一扩展途径。

使用yarn add的方式来安装插件，如

yarn add rollup-plugin-json --dev

安装完成之后在文件中引用

	import json from 'rollup-plugin-json'

引用过后在plugins中添加相应插件，之后就可以正常使用了

	plugins: [
        json()
    ]

• 安装rollup-plugin-node-resolve模块

  帮助 Rollup 查找外部模块
  安装方法与rollup-plugin-json一致

• 安装rollup-plugin-commonjs模块

  rollup只能处理ESM的模块打包，无法处理commonjs模块，我们可以安装rollup-plugin-commonjs模块进行相应的处理。
  安装方法与rollup-plugin-json一致

选用原则

• 优点

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

• 缺点

  • 加载非ESM得第三方模块比较复杂
  • 模块最终都被打包到一个函数中，无法时间HMR
  • 浏览器环境中，代码拆分功能依赖AMD库

建议

如果我们正在发开应用程序，需要引用大量的第三方模块、HMR的功能提升体验或是应用过大需要分包，rollup功能满足上还是有所欠缺。

如果我们正在开发一个框架或者类库，这些优点就特别有必要。大多数知名框架/库都在使用Rollup作为模块打包器,如vue、react、 three.js、moment等。