Rollup

Rollup相比于webpack，rollup更小巧，它是一个充分利用ESM( ECMAScript Modules )各项特性的高效打包器。

安装和基本使用

• 在项目中通过yarn 安装 rollup yarn add rollup --dev
• 直接输入 yarn rollup 会出现rollup的帮助信息
• 输入 yarn rollup ./src/index.js 会将目标文件进行默认格式的输出，在终端中显示
• 输入 yarn rollup ./src/index.js --format iife 表示以适合浏览器运行的自调用函数的形式进行打包
• 如果需要打包到文件中，运行 yarn rollup ./src/index.js --format iife --file ./dist/bundle.js 这样就会把打包的结果输出到根目录下dist目录中的 bundle.js 文件中
• 打包的结果非常简洁，rollup会自动进行 tree-sharking 的处理

Rollup配置文件

在根目录中新建 rollup.config.js 的配置文件，通过 ESM 导出一个配置对象

	export default {
     
	  input: 'src/index.js',
	  output: {
     
	    file: 'dist/bundle.js',
	    format: 'iife'
	  }
	}

• input 属性用来指定打包的入口文件
• output 属性用来指定输出的内容
  • file 是输出的文件名
  • format 是输出的内容格式

Rollup 使用插件

插件是rollup唯一的扩展方式，它不像webpack 分为plugin，loader, minimize.

我们拿一个插件做例子，这个插件叫做 rollup-plugin-json 作用是 导入json 文件

• 首先安装 yarn add rollup-plugin-json --dev
• 在rollup.config.js 中引入

import json from 'rollup-plugin-json'

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

加载npm模块

rollup 只能按照加载文件路径的方法，加载本地的模块，对于node_modules 中的文件模块，rollup不能像webpack那样直接通过模块名导入。

我们可以使用 rollup-plugin-node-resolve 插件来实现直接通过名称来导入npm模块

	import json from 'rollup-plugin-json'
	import resolve from 'rollup-plugin-node-resolve'
	
	export default {
     
	  input: 'src/index.js',
	  output: {
     
	    file: 'dist/bundle.js',
	    format: 'iife'
	  },
	  plugins: [
	    json(),
	    resolve()
	  ]
	}

加载CommonJS 规范的模块

rollup默认是不支持CommonJS 规范的模块的，当然也是有插件可以让它支持的。
使用 rollup-plugin-commonjs 插件就可以实现对CommonJS 规范的模块进行打包

	import json from 'rollup-plugin-json'
	import resolve from 'rollup-plugin-node-resolve'
	import commonjs from 'rollup-plugin-commonjs'
	
	export default {
     
	  input: 'src/index.js',
	  output: {
     
	    file: 'dist/bundle.js',
	    format: 'iife'
	  },
	  plugins: [
	    json(),
	    resolve(),
	    commonjs()
	  ]
	}

代码拆分

rollup实现代码拆分分为两步：

• 在导入模块时 使用esm 的动态加载模块语法
• 重新配置output为一个目录
• 把format 设置为amd

	// index.js 
	import('./logger').then(({
      log }) => {
     
	  log('code splitting~')
	})

	// rollup.config.js
	  output: {
     
	    // file: 'dist/bundle.js',
	    // format: 'iife'
	    dir: 'dist',
	    format: 'amd'
	  }

然后运行 yarn rollup --config

如果需要配置多个打包入口，只需要在rollup.config.js的input属性给它设置成数组或者对象

export default {
     
  // input: ['src/index.js', 'src/album.js'],
  input: {
     
    foo: 'src/index.js',
    bar: 'src/album.js'
  },
  output: {
     
    dir: 'dist',
    format: 'amd'
  }
}

由于format设置成了amd ,所以在html中导入模块文件需要借助于 require.js

  <!-- AMD 标准格式的输出 bundle 不能直接引用 -->
  <!-- <script src="foo.js"></script> -->
  <!-- 需要 Require.js 这样的库 -->
  <script src="https://unpkg.com/[email protected]/require.js" data-main="foo.js"></script>

webpack vs rollup 如何选择？

rollup的优点：

• 输出结果扁平
• 自动移除未引用代码
• 打包结果依然可读
  rollup的缺点：
• 加载非ESM的第三方模块比较复杂
• 模块最后都被打包到了一个函数中，无法实现 HMR
• 浏览器环境中，代码拆分功能依赖AMD库

综合上面的优缺点，在开发应用的时候建议使用webpack,如果是在开发库/框架 可以采用 rollup

Parcel

Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。
因为不需要任何配置，具体使用可直接参考文档 快速开始