Part2-2-3 Rollup

 

Rollup 仅仅是一款 ESM 打包器

提供一个充分利用 ESM 各项特性的高效打包器

Rollup 默认只能处理 ESM 模块

 

安装：yarn add rollup --dev

 

rollup 打包会自动开启 Tree Shaking

 

配置文件

项目根目录下创建 rollup.config.js 文件

input：指定入口文件

output：指定输入文件路径

 

yarn rollup --config

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'  // 指定输出格式
  }
}

 

Rollup 使用插件

rollup 自身的功能只是 ESM 的合并打包

如果项目需要：

加载其他类型资源模块

代码中导入 CommonJS 模块

编译 ECMAScript 新特性

 

对于这些需求，Rollup 支持使用插件的方式扩展

并且，插件是 Rollup 唯一扩展途径

 

导入json插件： yarn add rollup-plugin-json --dev

json文件中 被使用的数据会被打包，没有使用的数据会 Tree Shaking

import json from 'rollup-plugin-json'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json() // plugins 里放入的是 函数执行后的结果，而不是函数
  ]
}

 

Rollup 加载 NPM 模块

rollup 默认只能使用路径方式加载文件模块

rollup-plugin-node-resolve 插件使得 代码中可以直接使用模块名称 导入模块

yarn add rollup-plugin-node-resolve --dev

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()
  ]
}

 

Rollup 加载 CommonJS 模块

Rollup 默认只处理 ES Module 模块的打包

如果代码中 需要导入 CommonJS 模块，默认是不被支持，需要使用插件 rollup-plugin-commonjs

yarn add rollup-plugin-commonjs --dev

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 代码拆分

代码中使用 动态导入，rollup 会自动实现 代码拆分

index.js

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

// // 使用模块成员
// const msg = messages.hi

// log(msg)

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

 

rollup.config.js

export default {
  input: 'src/index.js',
  output: {
    // file: 'dist/bundle.js',
    // format: 'iife'
    dir: 'dist', // 代码拆分需要输出多个文件，所以必须指定 目录
    format: 'amd' // iife 自执行函数无法实现代码拆分，需要使用 amd 标准
  }
}

 

Rollup 多入口打包

对于不同入口公共使用部分会自动提取到单个文件中

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

因为使用了 amd 格式，所以如果 html 引用 rollup 打包后的 js文件，必须引用 支持 amd 的依赖，如：require.js

index.html

 

 

 

 

 

 

 

 

 

 

 

 

 

1