Rollup 是一个 JavaScript 模块打包器

安装

全局安装
npm i -g rollup
通过 rollup -v校验安装结果

使用

我们可以通过命令行的方式进行简单使用， 也可以使用配置文件进行更方便的配置。
你可以在配置文件中为同一个入口文件配置一个或多个输出，也可以配置多个不相关的入口及输出。

配置文件 rollup.config.js 通常在项目的根目录，大致包含以下配置字段:

字段	类型	命令行	含义
input	String	-i / --input	包入口文件
file	String	-o/ --output.file	输出文件
format	String	-f/ --output.format	生成包的格式: - amd - cjs - esm - iife - umd - system
plugin	Array	-	打包所使用的插件
external	() => Boolean 或 Array	-e/ --external	外链，外部依赖
global	Object	-g/ --globals	全局模块

// rollup.config.js
export default {
  // 核心选项
  input,     // 必须
  external,
  plugins,

  // 额外选项
  onwarn,
  cache,
  preserveEntrySignatures,
  strictDeprecations,

  // 危险区域
  acorn,
  acornInjectPlugins,
  context,
  moduleContext,
  preserveSymlinks,
  shimMissingExports,
  treeshake,
  
  // 实验性功能
  experimentalCacheExpiry,
  perf,

  output: {  // 必须 (如果要输出多个，可以是一个数组)
    // core output options
    dir,
    file,
    format, // required
    globals,
    name,
    plugins,

    // advanced output options
    assetFileNames,
    banner,
    chunkFileNames,
    compact,
    entryFileNames,
    extend,
    footer,
    hoistTransitiveImports,
    inlineDynamicImports,
    interop,
    intro,
    manualChunks,
    minifyInternalExports,
    outro,
    paths,
    preserveModules,
    preserveModulesRoot,
    sourcemap,
    sourcemapExcludeSources,
    sourcemapFile,
    sourcemapPathTransform,
    validate,

    // danger zone
    amd,
    esModule,
    exports,
    externalLiveBindings,
    freeze,
    indent,
    namespaceToStringTag,
    noConflict,
    preferConst,
    sanitizeFileName,
    strict,
    systemNullSetters
  },
  watch: {
    buildDelay,
    chokidar,
    clearScreen,
    skipWrite,
    exclude,
    include
  },
};

场景

插件

常用插件

• @rollup/plugin-node-resolve: 用于rollup支持Node.js解析算法，用于使用第三方模块（node_modules）
• @rollup/plugin-commonjs: 用于处理 node_modules 中 CommonJS 包，将CommonJS转为ES6以供rollup解析
• rollup-plugin-esbuild: esbuild 插件，用于将TS转为JS，并可以压缩、转换

minify: boolean 是否压缩代码
target: 代码转义目标版本
loaders: 文件拓展名映射

因为 vite 是基于 rollup 的， 所以vite的一些插件在 rollup 一样可以使用， 比如

• @vitejs/plugin-vue
• @vitejs/plugin-vue-jsx

插件开发

rollup插件开发

扩展知识

各个包的区别

格式	含义
amd	异步模块定义, 用于 Require.js 这样的模块加载器
cjs	CommonJS, 用于 Node 和 Browserify 或 Webpack
esm	ES Module, 模块文件，用于现代浏览器通过 <script type=module>形式引入
iife	自动执行文件，适合作为浏览器 <script>标签
umd	通用模块定义，同时兼容 amd, cjs,iife
system	SystemJS 加载器格式

参考下面例子理解

// main.js
import num from './num.js'

export default function() {
  console.log('the num is' + num)
}

// num.js
export default 666

那么其对应的各个包的内容如下

• es

var num = 666;

function main () {
	console.log( 'the num is ' + num );
}

export { main as default };

• amd

define((function () { 'use strict';

	var num = 666;

	function main () {
		console.log( 'the num is ' + num );
	}

	return main;

}));

• cjs

'use strict';

var num = 666;

function main () {
	console.log( 'the num is ' + num );
}

module.exports = main;

• iife

var myBundle = (function () {
	'use strict';

	var num = 666;

	function main () {
		console.log( 'the num is ' + num );
	}

	return main;

})();

• umd

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.myBundle = factory());
})(this, (function () { 'use strict';

	var num = 666;

	function main () {
		console.log( 'the num is ' + num );
	}

	return main;

}));

• system

System.register('myBundle', [], (function (exports) {
	'use strict';
	return {
		execute: (function () {

			exports('default', main);

			var num = 666;

			function main () {
				console.log( 'the num is ' + num );
			}

		})
	};
}));

相关文章

• Vite 源码解读 WIP

参考链接

rollup中文文档