Rollup —— 适合框架和类库使用的模块打包器

目录

• Rollup概述

  • Rollup vs Webpack
• 快速上手
• 配置文件

• 插件

  • rollup-plugin-json
  • rollup-plugin-node-resolve（加载npm模块）
  • rollup-plugin-commonjs

• Code Splitting（代码拆分）

  • Dynamic Imports（动态导入）

• 多入口打包

  • amd输出格式要注意什么？
• 指令参数参考大全

这篇文章目前旨在简单了解Rollup是什么而且如何上手操做，以后会再进行深刻分析。

Rollup概述

• rollup.js 中文网 、rollup.js官网

Rollup仅仅是一款JavaScript 模块打包器，也称为ESM打包器，并无像webpack那样有不少其余额外的功能，它能够将项目中散落的细小模块打包成整块的代码，可让他们更好的运行在浏览器环境 or Node.js环境 ，目前Vue2.0源码使用的打包器就是Rollup。

Rollup vs Webpack

Rollup与Webpack做用相似，可是Rollup更为小巧，webpack能够在前端开发中完成前端工程化的绝大多数功能，而Rollup仅仅是一款ESM打包器，并无其余额外的功能。

Rollup中并不支持相似HMR这种高级特性。可是Rollup诞生的目的并非要与webpack全面竞争，其初衷只是提供一个高效的ES Modules的打包器，充分利用ESM的各项特性构建出结构比较扁平，性能比较出众的类库。

快速上手

1. 下载模板 Rollup-firstdemo-temp
2. 安装模块npm i rollup -g
3. 在命令行中执行rollup ./src/index.js --format iife --file dist/bundle.js能够看到在输出目录中有了一个文件夹，里面的文件输出的文件很干净整洁，而且没有引用的模块并无打包进去（自带Tree-shaking）

• --format —— 指定输出文件打包格式，例如：iife是自调用函数
• --file —— 输出文件，后面跟打印路径，不写会打印到控制台

配置文件

建立名称为rollup.config.js文件，一样运行在node.js环境中，由于Rollup会单独处理这个文件，因此咱们能够直接使用ES Module。

1. 在文件中编辑

// rollup.config.js
// 这个文件中会导出一个配置对象
export default {
  // input 是打包入口文件路径
  input: 'src/index.js',
  // 输出配置
  output: {、
    // 输出路径及文件名
    file: 'dist/bundle.js',
    // 输出格式
    format: 'iife'
  }
}

1. 使用命令行要添加--config说要使用配置文件rollup --config，默认是不使用配置文件的。
2. rollup --config <filename>后面能够指定配置文件的名称，默认是rollup.config.js，也能够本身指定别的文件名。

插件

若是要加载其余类型的资源文件，或者是导入CommonJS模块，或者编译ES6新特性，Rollup一样支持使用插件的方式扩展。

插件是Rollup惟一扩展途径，这个与webpack有所不一样，webpack有plugins、module、optimization三种途径。

rollup-plugin-json

rollup-plugin-json是一个导入JSON文件的插件。

1. 安装插件 npm i rollup-plugin-josn --save-dev
2. 在rollup-plugin.js中配置插件

// 默认导出是一个插件函数
import json from 'rollup-plugin-json'
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    // 是调用结果放在数组中，而不是函数放进去
    json()
  ]
}

1. 在src/index.js中调用，打包以后能够看到json里面的变量已经打包进来了。

// 导入模块成员
import { log } from './logger'
import { name, version} from '../package.json'

log(name) // var name = "first";
log(version) // var version = "1.0.0";

rollup-plugin-node-resolve（加载npm模块）

rollup默认只能按照路径的方式加载本地模块，对于第三方模块并不能想webpack同样经过名称导入，因此须要经过插件处理。

1. 安装插件 npm i rollup-plugin-node-resolve --save-dev
2. 在rollup-plugin.js中配置插件

// 默认导出是一个插件函数
import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
export default {
  ...
  plugins: [
    // 是调用结果放在数组中，而不是函数放进去
    json(),
    resolve()
  ]
}

1. 准备一个第三方模块进行安装npm i lodash-es
2. 在src/index.js中调用，能够看到lodash-es的相关代码也导入进去了

// 导入模块成员，这里可使用node名称来导入而不是路径
import _ from 'lodash-es'
import { log } from './logger'

log(_.camelCase('hello world'))

PS:
这里使用 lodash的 ES Modules版本而不是其余版本的缘由是由于 rollup默认只能处理 ES Modules模块，若是要引用其余版本咱们须要作额外的处理。

rollup-plugin-commonjs

加载CommonJS模块，目前仍是有大量的npm模块使用CommonJS的方式导入成员，为了兼容就有了这个官方插件。

1. 安装插件npm i rollup-plugin-commonjs --save-dev
2. 在rollup-plugin.js中配置插件

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

1. 在src中新建文件cjs.module.js，编写文件

module.exports = {
  foo: bar
}

1. 在src/index.js中引入，能够看到变量已经打包进去。

// 导入模块成员
import { log } from './logger'
import cjs from './cjs.module'

log(cjs)

/* var cjs_module = {
    foo: bar
  };
*/

Code Splitting（代码拆分）

Dynamic Imports（动态导入）

动态导入，rollup内部会自动处理代码分包，
代码拆分

1. 在src/index.js中引入

// import函数返回一个promise对象
// then方法参数是module，因为模块导出的成员都会放在module对象中，因此能够经过解构的方式提取log
import('./logger').then(({ log }) => {
  log('code splitting~')
})

1. 修改roll.config.js中output里面的配置

export default {
  // input 是打包入口文件路径
  input: 'src/index.js',
  // 输出配置
  output: {
    // 输出目录名称
    dir: 'dist',
    // 输出格式
    format: 'amd'
  }
}

不修改配置文件直接运行 rollup --config会报错

UMD 和 iife 是不支持代码拆分方式格式，由于自执行函数会把全部的模块都放到一个函数中，并无像webpack同样有一些引导代码，因此没有办法作到代码拆分

若是要使用代码拆分，就须要使用AMD or CommonJS等方式。在浏览器中只能使用AMD的方式，因此这里改用输出格式为AMD

何况咱们拆分代码输出不一样的文件，file属性只是针对一个文件，因此咱们须要改用dir去指定文件夹名称，否则仍是会报错

1. 运行代码rollup --config能够看到dist文件夹里面有两个拆分打包的文件。

多入口打包

rollup支持多入口打包，对于不一样文件的公共部分也会自动提取到单个文件中做为独立的bundle.js

1. 模板中将多入口打包的代码开启，能够看到album和index都引用了fetch.js和logger.js的代码，咱们对rollup.config.js进行修改

export default {
  // 这里input要改为数组形式或者对象形式，对象形式能够修改打包的文件名，键对应的就是打包的文件名
  // input: ['src/index.js', 'src/album.js'],
  input: {
    indexjs: 'src/index.js',
    albumjs: 'src/album.js'
  },
  // 输出配置要改为拆分包的配置，觉得多入口打包默认会执行打包拆分的特性。因此输出格式要改为amd
  output: {
    dir: 'dist',
    format: 'amd'
  }
}

1. 命令行执行rollup --config 能够看到dist里面生成了三个文件，其中两个文件打包和一个公共模块的打包，里面包含了logger和fetch模块

amd输出格式要注意什么？

对于amd输出格式的打包文件是不能直接引用到页面上，必须经过实现AMD标准的库去加载。

尝试使用一下

1. 在dist下面生成一个HTML文件，尝试引入requirejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 <!--requirejs的cdn地址，data-main是入口文件的名称-->
  <script src="https://unpkg.com/requirejs@2.3.6/bin/r.js" data-main="albumjs.js"></script>
</body>
</html>

1. 浏览器打开能够看到内容正常引入，控制台也正常工做。

指令参数参考大全

• --format —— 指定输出文件打包格式，例如：iife是自调用函数
• --file —— 输出文件，后面跟打印路径，不写会打印到控制台
• --config —— 指定使用配置文件，后面能够加指定配置文件的名称，rollup --config <filename>，默认是rollup.config.js。