Rollup
与webpack作用相似，Rollup更为玲珑，它仅仅是一款ESM打包器，并没有其余额定性能，
例如自动化的插件，HMR等在Rollup中不反对
它的诞生并不是要与webpack全民竞争，只是提供一个充分利用ESM各项个性的高效打包器
装置: yarn add rollup --dev(^1.26.3)
应用:yarn rollup ./src/index.js入口文件 --format iife --file dist/bundle.js输入文件
查看rollup命令yarn rollup
# index.js 根文件// 导入模块成员import { log } from './logger'import messages from './messages'// 应用模块成员const msg = messages.hilog(msg)应用打包命令后，会生成 dist/bundle.js 文件
代码相比webpack大量疏导代码和模块函数，这里的输入很简略清晰，没有多余代码
输入代码中只会保留用到的局部，对于未援用的局部都没有输入，这是因为rollup默认会主动开启tree shaking,树摇最早在rollup中提出
# bundle.js(function () { 'use strict'; const log = msg => { console.log('---------- INFO ----------'); console.log(msg); console.log('--------------------------'); }; var messages = { hi: 'Hey Guys, I am zce~' }; // 导入模块成员 // 应用模块成员 const msg = messages.hi; log(msg);}());配置文件
rollup.config.js运行在node环境中，rollup会额定解决这个文件，因而也容许应用ESM
export default { input:'src/index.js', // 入口文件门路 output:{ // 输入相干配置 file:'dist/bundle.js' // 输入文件名 format:'iife' // 输入格局 }}执行须要通过 yarn rollup --config ， 默认状况下它是不会读取配置文件的
指定配置名称来打包文件 yarn rollup --config rollup.production.js
应用插件
rollup的本身性能就是esm模块的合并打包
如果有加载其余类型资源文件，导入Commonjs，编译ES6+新个性等须要应用插件扩大实现
插件是Rollup惟一扩大路径（webpack loader plugins minimizer）
例子
导入json插件，yarn add rollup-plugin-json --dev
# index.jsimport { log } from './logger'import messages from './messages'import { name, version } from '../package.json' // 导入json// 应用模块成员const msg = messages.hilog(msg)log(name) // 应用jsonlog(version)配置rollup.config.js
import json from 'rollup-plugin-json'export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'iife' }, plugins: [ json() // json函数调用后果放入plugins ]}查看打包后果
(function () { 'use strict'; ... var name = "03-plugins"; // json会被tree shaking，只显示援用成员 var version = "0.1.0"; log(name); log(version);}());加载 NPM 模块
rollup默认只能按文件门路的形式加载本地文件模块，对于node_modules下的第三方模块，并不能像webapck，通过模块名称导入对应模块
yarn add rollup-plugin-node-resolve --dev能够解决rollup应用第三方模块名称导入模块的问题。
import json from 'rollup-plugin-json'import resolve from 'rollup-plugin-node-resolve'export defalut{ input:'src/index.js', output:{ file:'dist/bundle.js', format:''iife }, plugins:[ json(), resolve() ]}此时就能够导入 NPM 模块了！
例如yarn add lodash-es 装置一个模块
# index.jsimport _ from 'lodash-es' //引入 NPM 模块_.camelCase('hello world')留神：应用 lodash-es（lodash esm版本） 而不是 lodash 是因为 rollup 默认只能解决 esm 模块，如果应用一般版本须要做额定解决
加载CommonJS模块
yarn add rollup-plugin-commonjs --dev 为了解决commonjs模块打包问题
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() ]}此时，尝试增加一个 commonjs 模块文件
# cjs-module.jsmodule.exports = { foo:'bar'}# index.js 入口import cjs from './cjs-module' console.log(cjs.foo)留神：如果改用const cjs = requrie('./cjs-module.js') 引入，须要留神不能够esm和commonjs两个混用，不然require不会被解析
Code Splitting
Dynamic Imports实现按需加载，rollup外部会进行代码拆分
# index.jsimport('./logger').then(({log})=>{ log('code splitting!')})此时打包会报错，yarn rollup --config，通知咱们代码拆分打包，format不能应用iife模式，
因为iife会把所有模块放在同一个函数中，相比于webpack并没有疏导代码，没法实现代码拆分，因而批改format为amd or commonjs
执行yarn rollup --config --format amd
仍然报错，代码宰割输入多文件trunk须要批改，file为dir
export default { input: 'src/index.js', output: { // file: 'dist/bundle.js', // format: 'iife' dir: 'dist', format: 'amd' }}多入口打包
公共局部也会提取进去作为独立的bundle
export default { // input: ['src/index.js', 'src/album.js'], input: { foo: 'src/index.js', bar: 'src/album.js' }, output: { dir: 'dist', format: 'amd' }}留神：多入口打包外部会主动提前公共模块（外部会代码拆分），就不能用iife，
amd标准无奈在浏览器间接援用，通过实现amd规范的库加载（Require.js）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <!-- AMD 规范格局的输入 bundle 不能间接援用 --> <!-- <script src="foo.js"></script> --> <!-- 须要 Require.js 这样的库 --> <script src="https://unpkg.com/requirejs@2.3.6/require.js" data-main="foo.js"></script> <!-- data-main执行入口模块门路 --></body></html>用live server关上这个html
选用准则
长处
- 输入后果更加扁平
- 主动移除未援用代码
- 打包后果仍然齐全可读
毛病
- 加载非 ESM 的第三方模块比较复杂
- 模块最终被打包到一个函数中，无奈实现 HMR
- 浏览器环境中，代码拆分性能依赖 AMD 库
如果咱们正在开发应用程序，须要大量引入第三方模块，利用过大还要分包
如果咱们开发一个框架或者类库，很少依赖第三方模块，大多数出名框架/库都在应用Rollup作为模块打包
Webpack大而全，Rollup小而美，应用程序用webpack，库/框架Rollup
optimization:{ concatenateModules:true // 抹平了rollup的劣势}