rollup的基本使用 基本配置与处理各种文件

rollup

rollup是一个javascript的模块化打包工具 可以帮助我们编译小的代码到一个大的负载的代码中 比如一个库或者一个应用

rollup与webpack的区别
rollup主要针对ES Module进行打包
另外webpack通常可以通过各种loader处理各种各样的文件 以及处理他们的依赖关系
rollup更多时候专注于处理javascript代码的（当然也可以处理css font vue等文件）
rollup的配置和理念相对于webpack来收 更加的简洁和容易理解
在早期webpack不支持tree shaking时 rollup具备更强的优势

通常在实际项目开发过程中 都会使用webpack

rollup的基本使用

npm install rollup

创建main.js 打包到bundle.js
打包浏览器的库
npx rollup ./src/main.js -f iife -o dist/bundle.js
打包AMD的库
npx rollup ./src/main.js -f amd -o dist/bundle.js
打包CommonJS的库
npx rollup ./src/main.js -f cjs --o dist/bundle.js
打包通用的库（必须跟上name）
npx rollup ./src/main.js -f umd --name mathUtil -o dist/bundle.js

rollup的配置

module.exports = {
	//入口
	input: "./lib/index.js",
	//出口
	output: [
		{
			format: "umd",
			name: "whyUtils",
			file: "./build/bundle.umd.js",
		},
		{
			format: "cjs",
			file: "./build/bundle.cjs.js",
		},
		{
			format: "amd",
			file: "./build/bundle.amd.js",
		},
		{
			format: "iife",
			file: "./build/bundle.browser.js",
		},
	],
};

解决rollup和第三方库的问题

安装解决commonjs的库
npm install @rollup/plugin-commonjs

安装解决node_modules的库
npm install @rollup/plugin-node-resolve

const commonjs = require("@rollup/plugin-commonjs")
const resolve = require("@rollup/plugin-node-resolve")

module.exports = {
	//入口
	input: "./lib/index.js",
	//出口
	output: {
		format: "umd",
		name: "utils",
		file: "./build/bundle.umd.js",
	},
	plugins: [
		resolve(),
		commonjs()
	],
};

Babel转换代码

安装rollup对应的babel插件
npm install @rollup/plugin-babel
修改配置文件

const {babel} = require("@rollup/plugin-babel")

module.exports = {
	//入口
	input: "./lib/index.js",
	//出口
	output: {
		format: "umd",
		name: "utils",
		file: "./build/bundle.umd.js",
	},
	plugins: [
		babel({
			babelHelpers: "bundled",
			exclude: /node_modules/
		})
	],
};

babel.config.js文件
npm install @babel/preset-env

module.exports = {
	presets: [
		"@babel/preset-env"
	]
}

Terser代码压缩

如果我们希望对代码进行压缩 可以使用@rollup/plugin-terser
npm install @rollup/plugin-terser

const {babel} = require("@rollup/plugin-babel")
const terser = require("@rollup/plugin-terser")
module.exports = {
	//入口
	input: "./lib/index.js",
	//出口
	output: {
		format: "umd",
		name: "utils",
		file: "./build/bundle.umd.js",
	},
	plugins: [
		babel({
			babelHelpers: "bundled",
			exclude: /node_modules/
		}),
		terser()
	],
};

处理css文件

npm install rollup-plugin-postcss postcss
配置postcss的插件

const postcss = require("rollup-plugin-postcss postcss");

module.exports = {
	//入口
	input: "./lib/index.js",
	//出口
	output: {
		format: "umd",
		name: "utils",
		file: "./build/bundle.umd.js",
	},
	plugins: [
		postcss()
	],
};

处理vue文件

处理vue文件 我们需要使用rollup-plugin-vue插件
但是注意默认 情况下我们安装的是vue3.x的版本 所以我们这里指定了以下rollup-plugn-vue的版本
npm install rollup-plugin-vue @vue/compiler-sfc

使用vue插件

const vue = require("rollup-plugin-vue");
module.exports = {
	//入口
	input: "./lib/index.js",
	//出口
	output: {
		format: "umd",
		name: "utils",
		file: "./build/bundle.umd.js",
	},
	plugins: [
		vue()
	],
};

在我们打包vue项目后 汇报process is not edefined的错误
这时因为我们在打包的vue代码中 用到process.env.NODE_ENV 所以我们可以使用一个插件rollup-plugin-replace设置它对应的值
npm install rollup-plugin-replace

const vue = require("rollup-plugin-vue");
const replace = require("rollup-plugin-replace");

module.exports = {
	//入口
	input: "./lib/index.js",
	//出口
	output: {
		format: "umd",
		name: "utils",
		file: "./build/bundle.umd.js",
	},
	plugins: [
		vue(),
		replace({
		"process.envNODE_ENV": JSON.stringify("production"),
	}),
	],
};

搭建本地服务器

第一步 使用rollup-plugin-serve搭建服务
npm install rollup-plugin-serve

const serve = require("rollup-plugin-serve");

module.exports = {
	//入口
	input: "./lib/index.js",
	//出口
	output: {
		format: "umd",
		name: "utils",
		file: "./build/bundle.umd.js",
	},
	plugins: [
		serve({
			port: 8000,
			open: true,
			contentBase: ".",
		}),
	],
};

第二步 当文件发生变化 自动刷新浏览器
npm install rollup-plugin-livereload

const serve = require("rollup-plugin-serve");
const livereload = require("rollup-plugin-livereload")

module.exports = {
	//入口
	input: "./lib/index.js",
	//出口
	output: {
		format: "umd",
		name: "utils",
		file: "./build/bundle.umd.js",
	},
	plugins: [
		serve({
			port: 8000,
			open: true,
			contentBase: ".",
		}),
		libereload()
	],
};

第三步 启动时 开启文件监听
npx rollup -c -w

区分开发环境

我们可以在package.json中创建一个开发和构建的脚本

  "scripts": {
    "serve":"rollup -c --environment NODE_ENV=development -w",
		"build":"rollup -c --environment NODE_ENV=production "
  },

const serve = require("rollup-plugin-serve");
const livereload = require("rollup-plugin-livereload");
const postcss = require("rollup-plugin-postcss postcss");
const terser = require("@rollup/plugin-terser");
const vue = require("rollup-plugin-vue");
const replace = require("rollup-plugin-replace");

const isProduction = process.env.NODE_ENV === "production";

const plugins = [
	postcss(),
	vue(),
	replace({
		"process.envNODE_ENV": JSON.stringify("production"),
	}),
];

if (isProduction) {
	plugins.push(terser());
} else {
	const extraPlugins = [
		serve({
			port: 8000,
			open: true,
			contentBase: ".",
		}),
		livereload(),
	];
	plugins.push(...extraPlugins);
}

module.exports = {
	//入口
	input: "./lib/index.js",
	//出口
	output: {
		format: "umd",
		name: "utils",
		file: "./build/bundle.umd.js",
	},
	plugins: plugins,
};