目录

  • 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对象中，所以能够通过解构的形式提取logimport('./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。