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