个人博客

Rollup

TIP

Rollup 是一个专注于JS模块的打包器，能打包出更精简、更小的代码，通常用于JS库、JS框架的打包

一 安装

1 全局安装

# 全局安装
npm install --global rollup

# 查看命令帮助
rollup --help

2 局部安装

  • 安装rollup
npm init -y

npm i rollup -D
  • 编写配置文件rollup.config.js
import path from 'path';

export default {
	input: 'src/index.js', // 入口
	output: { // 出口
		format: 'iife', // 打包输出格式：立即执行 自执行函数
		file: path.resolve(__dirname, 'dist/bundle.js'), // 出口文件
		sourcemap: true // 根据源码产生映射文件
	}
}
  • 修改启动参数package.json
"scripts": {
	"dev": "rollup -c -w"
},
  • 运行命令
npm run dev

二 常用配置

// rollup.config.js
export default {
	// 核心选项
	input: 'src/index.js', // 入口，可以单入口、可以多入口
	output: { // 出口
		format: 'iife', // 打包输出格式，五种：amd / es6 / iife / umd / cjs
		file: path.resolve(__dirname, 'dist/bundle.js'), // 出口文件
		sourcemap: true // 根据源码产生映射文件
	},
    plugins:[// 插件
		......
	],
	external: ['lodash'], //第三方依赖
	globals: { // 全局模块，例如全局变量$就是jquery
		jquery: '$'
	}
};

三 插件列表

四 部分配置

# 安装解析第三方和commonJS
npm i @rollup/plugin-node-resolve @rollup/plugin-commonjs -D

# 安装本地服务器
npm i rollup-plugin-serve -D

# 安装热更新
npm i rollup-plugin-livereload -D

# 安装typescript支持
npm i typescript rollup-plugin-typescript2 -D

# 安装css支持
npm i rollup-plugin-postcss -D

# 安装babel支持
npm i @rollup/plugin-babel @babel/core @babel/preset-env -D

# 安装js压缩
npm i rollup-plugin-terser -D

五 开发环境

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve'; // 解析第三方模块的插件
import commonjs from '@rollup/plugin-commonjs'; // 解析commonJS模块
import typescript from 'rollup-plugin-typescript2'; // 解析ts的插件
import serve from 'rollup-plugin-serve'; // 启动本地服务的插件
import livereload from 'rollup-plugin-livereload'; // 支持热更新
import postcss from 'rollup-plugin-postcss'; // 解析css
import babel, {getBabelOutputPlugin} from '@rollup/plugin-babel'; // babel

import path from 'path';

// 开发环境
export default {
	input: 'src/index.js', // 入口
	output: { // 出口
		format: 'esm', // 打包输出格式：立即执行 自执行函数
		file: path.resolve(__dirname, 'dist/bundle.js'), // 出口文件
		sourcemap: true // 根据源码产生映射文件
	},
    plugins:[// 插件
		resolve({// 第三方文件解析
			extensions: ['.js', '.ts']
		}),
		commonjs(),
		typescript({
			tsconfig: path.resolve(__dirname, 'tsconfig.json')
		}),
		postcss(),
		getBabelOutputPlugin({
			presets: ['@babel/preset-env']
		}),
		babel({
			babelHelpers: 'bundled',
			// include: '/src'
			exclude: 'node_modules/**'
		}),
		livereload(),
		serve({
			openPage: '/index.html',
            contentBase: '', // 
			port: 3001, // 端口
			// open: true // 自动打开浏览器
		})
	]
}

// package.json配置打包命令
"scripts": {
    "dev": "rollup -c -w"
  },

六 生产环境

// rollup.config.build.js
import resolve from '@rollup/plugin-node-resolve'; // 解析第三方模块的插件
import commonjs from '@rollup/plugin-commonjs'; // 解析commonJS模块
import typescript from 'rollup-plugin-typescript2'; // 解析ts的插件
import {terser} from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss'; // 解析css

import path from 'path';

// 生产环境
export default {
	input: 'src/index.js', // 入口
	output: {
		format: 'iife', // 打包格斯：立即执行 自执行函数
		file: path.resolve(__dirname, 'dist/bundle.js'), // 出口文件
		sourcemap: true // 根据源码产生映射文件
	},
    plugins:[
		resolve({// 第三方文件解析
			extensions: ['.js', '.ts']
		}),
		commonjs(),
		typescript({
			tsconfig: path.resolve(__dirname, 'tsconfig.json')
		}),
		terser(),
		postcss(),
	]
}

// package.json配置打包命令
"scripts": {
    "build": "rollup -c rollup.config.build.js"
  },