rollup 学习笔记二

教程（优化手册）

使用插件

当构建复杂的打包时，你通常需要更大的灵活性 - 导入使用NPM安装的模块、使用Babel编译代码、使用JSON文件等。

@rollup/plugin-json

它允许 Rollup 从 JSON 文件导入数据。

安装

npm install --save-dev @rollup/plugin-json

rollup.config.mjs

// rollup.config.mjs
import json from '@rollup/plugin-json';

export default {
	input: 'src/main.js',
	output: {
		file: 'bundle.js',
		format: 'cjs'
	},
	plugins: [json()]
};

@rollup/plugin-terser

输出插件：某些插件还可以专门应用于某些输出。请参阅 插件钩子 了解输出特定插件功能的技术细节。简而言之，这些插件只能在 Rollup 的主要分析完成后才能修改代码。如果不兼容的插件被用作特定于输出的插件，Rollup 将触发警告。一种可能的用例是缩小浏览器中使用的包。

安装：

npm install --save-dev @rollup/plugin-terser

rollup.config.mjs

// rollup.config.mjs
import json from '@rollup/plugin-json';
import terser from '@rollup/plugin-terser';

export default {
	input: 'src/main.js',
	output: [
		{
			file: 'bundle.js',
			format: 'cjs'
		},
		{
			file: 'bundle.min.js',
			format: 'iife',
			name: 'version',
			plugins: [terser()]
		}
	],
	plugins: [json()]
};

代码分割

对于代码分割，在某些情况下，Rollup 会自动将代码分割成块，例如动态加载或多个入口点，并且有一种方法可以通过 output.manualChunks 选项显式告诉 Rollup 将哪些模块分割成单独的块。

• iife和umd打包方式，不支持代码分割；

参考：代码分割