前言
最近学习了rollup的相关知识。对自己来说也算是一种知识储备。这篇主要记录我对rollup学习的一些理解与笔记。
rollup简单概述
我对于rollup的理解，rollup是一款小巧的javaScript模块打包器。并且rollup是一款ESM打包器。它基于ES模块化规范。具体可以参考官网链接上的概述（有能力看英文文档的还是看英文文档，中文文档有些地方可能不全，这里也贴出中文文档链接:传送门）。
关于rollup的特性其实上面的总结已经说的差不多了，这里简单罗列一下
-
小巧，简单 （从文档体积就可以看出来）
-
基于ES模块化规范 （意味为其他模块化规范如CommonJS就需要用插件来支持）
-
rollup中不支持HMR（热替换），因为模块最终被打包到一个函数中
-
自带tree sharking
-
输出结果更加扁平，执行效率更高，并且打包结果依旧可读
快速开始一个demo
安装rollup
yarn add rollup --save--dev
// 或者
npm install rollup --save--dev
// 再或者
cnpm install rollup --save-dev
安装完成后，在node_modules/.bin中就会有rollup文件，执行yarn rollup就会执行打包命令啦。
文件目录
demo的文件目录结构如下所示
rollup_study_project
├─ .vscode
│ └─ settings.json
├─ dist
│ └─ bundle.js # 打包生成文件
├─ package.json
├─ README.md
├─ rollup.config.js # rollup配置文件
├─ src
│ ├─ components # 组件文件夹
│ │ ├─ a.js
│ │ └─ b.js
│ ├─ index.html
│ └─ index.js # 入口文件
└─ yarn.lock
rollup.config.js是Rollup的配置文件，一个简单的配置主要包含
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'cjs',
name:'A',
sourcemap:true
},
external : ["XXX"],
plugins : [],
global : {
'jquery' : '$'
}
};
-
input : 入口文件路径
-
output ： 出口文件配置
-
file ： 出口文件路径
-
format ： 生成文件的格式， 主要有amd， cjs ， es，life，umd
-
amd ： 异步模块定义，用于像RequestJS这样的模块加载器。
-
cjs -- CommonJS, 适用于Node或Browserify/webpack
-
es -- 将软件包保存为ES模块文件。
-
iife -- 一个自动执行的功能，适合作为 <script>标签这样的。
-
umd -- 通用模块定义，以amd, cjs, 和 iife 为一体
-
name :当format为iife和umd时必须提供，将作为全局变量挂在window(浏览器环境)下：window.A=...
-
sourcemap : 生成bundle.map.js文件，方便调试
-
external : 不要对"XXX"文件进行打包，而是作为外部依赖
-
plugins : 一些插件
-
global : 告诉rollup 全局变量$即是jquery
多路径打包：
只需要将配置变为一个数组形式
export default [
{
input: 'main-a.js',
output: {
file: 'dist/bundle-a.js',
format: 'cjs'
}
},
{
input: 'main-b.js',
output: [
{
file: 'dist/bundle-b1.js',
format: 'cjs'
},
{
file: 'dist/bundle-b2.js',
format: 'es'
}
]
}
];
常用命令行参数
-i, --input <filename> 要打包的文件（必须）
-o, --file <output> 输出的文件 (如果没有这个参数，则直接输出到控制台)
-f, --format <format> 输出的文件类型 (amd, cjs, esm, iife, umd)
-e, --external <ids> 将模块ID的逗号分隔列表排除
-g, --globals <pairs> 以`module ID:Global` 键值对的形式，用逗号分隔开
任何定义在这里模块ID定义添加到外部依赖
-n, --name <name> 生成UMD模块的名字
-h, --help 输出 help 信息
-m, --sourcemap 生成 sourcemap (`-m inline` for inline map)
-v, --version 打印版本号，如果改动重新打包
-w, --watch 监听源文件是否改动
--amd.id AMD模块的ID，默认是个匿名函数
--amd.define 使用Function来代替`define`
--no-strict 在生成的包中省略`"use strict";`
--no-conflict 对于UMD模块来说，给全局变量生成一个无冲突的方法
--intro 在打包好的文件的块的内部(wrapper内部)的最顶部插入一段内容
--outro 在打包好的文件的块的内部(wrapper内部)的最底部插入一段内容
--banner 在打包好的文件的块的外部(wrapper外部)的最顶部插入一段内容
--footer 在打包好的文件的块的外部(wrapper外部)的最底部插入一段内容
--interop 包含公共的模块（这个选项是默认添加的）
--silent 不将警告打印到控制台
javaScript API
rollup 提供了可从 Node.js 使用的 JavaScript API。
- rollup.rollup
该rollup.rollup函数接收一个输入选项对象作为参数，并返回一个解析为bundle具有各种属性和方法的对象的 Promise，在此步骤中，Rollup 将构建模块图并执行 tree-shaking，但不会生成任何输出。
在一个bundle对象上，您可以bundle.generate使用不同的输出选项对象多次调用以在内存中生成不同的包。如果您想直接将它们写入磁盘，请bundle.write改用。
一旦你完成了bundle对象，你应该调用bundle.close()，它会让插件通过closeBundle钩子清理它们的外部进程或服务。
- rollup.watch
Rollup 也提供了 rollup.watch 函数，当它检测到磁盘上单个模块已经改变，它会重新构建你的文件束。 当你通过命令行运行 Rollup，并带上 --watch 标记时，此函数会被内部使用。
后记
下一篇是我学习rollup的插件的笔记，希望会对大家有所帮助。
下一篇：rollup学习--02.常用插件学习
网友评论