共计 3985 个字符，预计需要花费 10 分钟才能阅读完成。
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.hi
log(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.js
import {log} from './logger'
import messages from './messages'
import {name, version} from '../package.json' // 导入 json
// 应用模块成员
const msg = messages.hi
log(msg)
log(name) // 应用 json
log(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.js
import _ 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.js
module.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.js
import('./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 的劣势}