Rollup打包

rollup简洁，小，高效。默认开启treeshaking，输出结果更加扁平，打包结果完全可读，
加载非ESM的第三方模块比较复杂，模块最终都被打包到一个函数中，无法实现HMR,浏览器环境中，代码拆分功能依赖AMD库，适用于开发一个框架或者类库，很少在代码中依赖第三方模块
可以通过命令行方式进行简单的打包
如

yarn rollup ./src/index.js --format iife --file dist/index.js

也可以通过配置文件方式进行配置，不过运行时需要加--config参数，因为默认不会打包不会使用配置文件
配置文件如

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

运行命令

yarn rollup --config 
yarn rollup --config rollup.config.js // 或者prod.config.js等等指定配置文件名

使用插件
插件是Rollup唯一扩展方式

import json from 'rollup-plugin-json' // 一个导入json文件插件

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json() // 调用结果放入plugins数组中
  ]
}

使用NPM模块
可以借助rollup-plugin-node-resolve插件,放入plugins中

import resolve from 'rollup-plugin-node-resolve'
...
  plugins: [
    json(),
    resolve()
  ]
...

加载CommonJS模块
默认不被支持，因为rollup就是为了打包ESM模块.需要借助rollup-plugin-commonjs

import commonjs from 'rollup-plugin-commonjs'
...
  plugins: [
    json(),
    resolve(),
    commonjs()
  ]
...

代码拆分
使用动态导入实现代码拆分

import('./logger').then(({ log }) => {
  log('代码拆分')
})

打包格式format不能使用IIFE或者UMD这种方式，需要输入多个文件，output参数需要配置打包输出目录

  output: {
    dir: 'dist',
    format: 'amd'
  }

多入口打包
input属性修改为数组或者对象的形式

  input: {
    foo: 'src/indexA.js',
    bar: 'src/indexB.js'
  },