共计 3231 个字符，预计需要花费 9 分钟才能阅读完成。
与 webpack 作用相似，Rollup 更为玲珑，它仅仅是一款 ESM 打包器，并没有其余额定性能，例如自动化的插件，HMR 等在 Rollup 中不反对
装置
yarn add rollup --dev执行打包命令
file：打包输入的文件目录format：指定打包输入的格局
yarn rollup ./src/index.js --file dist/bundle.js --format iife查看打包后果
(function () {
"use strict";
const log = (msg) => {console.log("---------- INFO ----------");
console.log(msg);
console.log("--------------------------");
};
var messages = {hi: "Hi~",};
// 导入模块成员
// 应用模块成员
const msg = messages.hi;
log(msg);
})();代码相比 webpack 大量疏导代码和模块函数，这里的输入很简略清晰，没有多余代码，输入代码中只会保留用到的局部，对于未援用的局部都没有输入，这是因为 rollup 默认会主动开启 tree shaking
配置文件
在我的项目中创立一个名为 rollup.config.js 的文件，减少如下代码：
export default {
input: "src/index.js",
output: {
file: "dist/bundle.js",
format: "iife",
},
};执行打包命令
yarn rollup --config rollup.config.js应用插件
rollup 的本身性能就是 ESM 模块的合并打包，如果有加载其余类型资源文件，导入 Commonjs，编译 ES6+ 新个性等须要应用插件扩大实现
装置对应插件
yarn add rollup-plugin-json --dev批改配置
import json from "rollup-plugin-json";
export default {
input: "src/index.js",
output: {
file: "dist/bundle.js",
format: "iife",
},
plugins: [json()],
};加载 npm 模块
rollup 默认只能按文件门路的形式加载本地文件模块，对于 node_modules 下的第三方模块，并不能像 webapck 通过模块名称导入对应模块
rollup-plugin-node-resolve 能够解决 rollup 应用第三方模块名称导入模块的问题
装置扩大模块
yarn add rollup-plugin-node-resolve --dev援用 NPM 模块
import _ from "lodash-es";
_.camelCase("hello world");更改配置
import json from "rollup-plugin-json";
import resolve from "rollup-plugin-node-resolve";
export default {
input: "src/index.js",
output: {
file: "dist/bundle.js",
format: "iife",
},
plugins: [json(), resolve()],
};留神：应用 lodash-es（lodash esm 版本）而不是 lodash 是因为，rollup 默认只能解决 ESM 模块，如果应用一般版本须要做额定解决
import json from "rollup-plugin-json";
import resolve from "rollup-plugin-node-resolve";
export default {
input: "src/index.js",
output: {
file: "dist/bundle.js",
format: "cjs",
},
plugins: [json(), resolve()],
// 指出应将哪些模块视为内部模块
external: ["lodash"],
};加载 CommonJS 模块
rollup-plugin-commonjs 解决了 commonjs 模块打包问题
装置扩大包
yarn add rollup-plugin-commonjs --dev批改配置文件
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: "cjs",
},
plugins: [json(), resolve(), commonjs()],
// 指出应将哪些模块视为内部模块
external: ["lodash"],
};Code Splitting
Dynamic Imports 实现按需加载，rollup 外部会进行代码拆分
import("./logger").then(({log}) => {log("code splitting!");
});批改配置文件
- 代码宰割输入多文件 chunks 须要批改，file 为 dir
- 因为 iife 会把所有模块放在同一个函数中，相比于 webpack 并没有疏导代码，没法实现代码拆分，因而批改 format 为
amdorcjs
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: {
dir: "dist",
format: "cjs",
},
plugins: [json(), resolve(), commonjs()],
// 指出应将哪些模块视为内部模块
external: ["lodash"],
};多入口打包
公共局部也会提取进去作为独立的 bundle
export default {// input: ['src/index.js', 'src/album.js'],
input: {
foo: "src/index.js",
bar: "src/album.js",
},
output: {
dir: "dist",
format: "amd",
},
};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>准则
- 如果咱们正在开发应用程序，须要大量引入第三方模块，利用过大还要分包，应抉择 webpack
- 如果咱们开发一个框架或者类库，很少依赖第三方模块，应抉择 rollup。大多数出名框架 / 库都在应用 Rollup 作为模块打包
