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