关于rollup: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'
  },