配置
多入口打包
此场景适用于文件打包为多个类型供第三方引用,或者多入口多文件打包。
1export default [2 {3 input: 'src/main.js',4 output: {5 file: 'dist/index.umd.js',6 format: 'umd',7 name: 'index'8 },9 },10 {11 input: 'src/main.js',12 output: {13 file: 'dist/index.es.js',14 format: 'es',15 },2 collapsed lines
16 }17]
生成后的dist文件目录结构为如下:
1dist2├── index.es.js3├── index.umd.js
启动本地服务功能
1npm install rollup-plugin-serve --save-dev
1import serve from 'rollup-plugin-serve'2
3export default {4 input: 'src/main.js',5 output: {6 file: 'dist/bundle.js',7 format: 'iife',8 name: 'bundleName',9 },10 plugins: [11 serve({12 open: true,13 port: 3000,14 contentBase: './dist'15 }),2 collapsed lines
16 ]17};
1{2 "scripts": {3 "test": "echo \"Error: no test specified\" && exit 1",4 "build": "rollup --config rollup.config.js",5 "dev": "rollup --config rollup.config.js"6 }7}
常用插件
babel打包
- @babel/core babel核心包
- @babel/preset-env 预设
- @babel/plugin-babel rollup插件
1npm install @babel/core @babel/preset-env @babel/pulgin-babel --save-dev
1import { babel } from '@rollup/plugin-babel';2
3export default {4 input: 'src/main.js',5 output: {6 file: 'dist/bundle.js',//输出文件的路径和名称7 format: 'es',8 },9 plugins: [babel()],10}
1'use strict';2
3var sum = function sum(a, b) {4 return a + b;5};6var result = sum(1, 2);7console.log(result);
打包第三方库
在rollup中,从node_modules中引入的包是不会打包的,也就是说,我们在main.js中引入react或者lodash使用,打包之后的文件无法直接使用。
1import _ from 'lodash'2
3export function sumA(a, b) {4 return _.add(a, b)5}
打包生成结果如下:
1import _ from 'lodash';2
3function sumA(a, b) {4 return _.add(a, b)5}6
7export {sumA};
如果想要打包第三方库需要安装插件@rollup/plugin-node-resolve
和@rollup/plugin-commonjs
。
1import resolve from '@rollup/plugin-node-resolve';2import commonjs from '@rollup/plugin-commonjs';3
4export default {5 input: 'src/main.js',6 output: {7 file: 'dist/bundle.js',//输出文件的路径和名称8 format: 'es',9 },10 plugins: [resolve(), commonjs()],11}
这样打包出来的结果就是符合我们可以预期使用的文件了。
1var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};2
3function getDefaultExportFromCjs(x) {4 return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;5}6
7// ... 省略10000多行
如果有的第三方库,我们需要打包,有的第三方库,又不需要打包,可以添加参数external
来配置。
1import resolve from '@rollup/plugin-node-resolve';2import commonjs from '@rollup/plugin-commonjs';3
4export default {5 input: 'src/main.js',6 output: {7 file: 'dist/bundle.js',//输出文件的路径和名称8 format: 'es',9 },10 plugins: [resolve(), commonjs()],11 external: ['lodash']12}
这样打包之后的文件,还是和之前一样:
1import _ from 'lodash';2
3function sumA(a, b) {4 return _.add(a, b)5}6
7export {sumA};
添加打包css功能
1npm install postcss rollup-plugin-postcss --save-dev
1import "./style.css"2let sum = (a, b) => a + b;3let result = sum(1, 2);4console.log(result);
1body{2 background: red;3}
1import postcss from 'rollup-plugin-postcss'2
3export default {4 input: 'src/main.js',5 output: {6 file: 'dist/bundle.js',7 format: 'iife',8 name: 'bundleName',9 },10 plugins: [11 postcss()12 ]13};
terser代码压缩
1npm install @rollup/plugin-terser --save-dev
1import {terser} from 'rollup-plugin-terser'2
3export default {4 input: 'src/main.js',5 output: {6 file: 'dist/bundle.js',//输出文件的路径和名称7 format: 'es',8 plugins: [terser()],9 },10 plugins: [resolve(), commonjs()],11 external: ['lodash']12}
打包之后生成的bundle.js文件如下:
1import o from "lodash";2
3function r(r, t) {4 return o.add(r, t)5}6
7export {r as sumA};
重命名alias
1pnpm install @rollup/plugins-alias
1import alias from "@rollup/plugin-alias";2import path from "path";3
4export default {5 input: 'src/main.js',6 output: {7 file: 'dist/bundle.js',//输出文件的路径和名称8 format: 'es',9 },10 plugins: [alias({11 entries: [12 {find: 'utils', replacement: path.resolve(__dirname, 'src/utils')},13 ]14 })],15}
全局替换插件
1pnpm install @rollup/plugin-replace
1console.log(__TEST__)2
3document.getElementById('app').innerHTML = __TEST__;
1import replace from '@rollup/plugin-replace'2
3export default {4 input: 'src/main.js',5 output: {6 file: 'dist/bundle.js',//输出文件的路径和名称7 format: 'es',8 },9 plugins: [10 replace(11 {12 preventAssignment: true,13 __TEST__: "123456",14 }15 )2 collapsed lines
16 ],17}
打包之后的文件输出结果:
1console.log(123456);2
3document.getElementById('app').innerHTML = 123456;
eslint插件
1pnpm install @rollup/plugin-eslint eslint
添加.eslintrc.js配置:
1// .eslintrc.js 示例,非正规项目使用2module.exports = {3 "env": {4 "browser": true,5 "es2021": true6 },7 "extends": "eslint:recommended",8 "parserOptions": {9 "ecmaVersion": "latest",10 "sourceType": "module"11 },12}
1import eslint from "@rollup/plugin-eslint";2
3export default {4 input: 'src/main.js',5 output: {6 file: 'dist/bundle.js',//输出文件的路径和名称7 format: 'es',8 },9 plugins: [10 eslint({11 throwOnError: true, // 设置eslint检查有错误的情况下会编译失败12 }),13 ],14}
image插件
@rollup/plugin-image
插件可以将图片导入为 Base64 编码的字符串。
如果不想将图片处理为base64,而是作为文件额外的文件引入,可以使用@rollup/plugin-url
,或者将图片复制到输出目录,可以使用rollup-plugin-copy
。
1pnpm i @rollup/plugin-image
1import img from "./images/avatar.png"2
3console.log(img)
1import image from "@rollup/plugin-image";2
3export default {4 input: 'src/main.js',5 output: {6 file: 'dist/bundle.js',//输出文件的路径和名称7 format: 'es',8 },9 plugins: [10 image()11 ],12}
strip插件
移除多余的console
1pnpm i @rollup/plugin-strip
1import image from "@rollup/plugin-image";2
3export default {4 input: 'src/main.js',5 output: {6 file: 'dist/bundle.js',//输出文件的路径和名称7 format: 'es',8 },9 plugins: [10 image()11 ],12}
添加typescript
1npm install tslib typescript @rollup/plugin-typescript --save-dev
1const myName: string = "cirry";2const age: number = 18;3console.log(age)
1import typescript from '@rollup/plugin-typescript';2
3export default {4 input: 'src/index.ts',5 output: {6 dir: 'output',7 format: 'cjs'8 },9 plugins: [typescript()]10};
1(function () {2 'use strict';3
4 var age = 18;5 console.log(age);6
7})();
生成ts配置文件:tsc --init
1{2 "compilerOptions": {3 "target": "es5",4 "module": "ESNext",5 "strict": true,6 "skipLibCheck": true,7 "forceConsistentCasingInFileNames": true8 }9}
打包cdn引入的包
1import _ from 'lodash';2import $ from 'jquery';3console.log(_.concat([1,2,3],4,5));4console.log($);5export default 'main';
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta http-equiv="X-UA-Compatible" content="IE=edge">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>rollup</title>8</head>9<body>10 <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/jquery/jquery.min.js"></script>12 <script src="bundle.js"></script>13</body>14</html>
1import babel from 'rollup-plugin-babel';2import resolve from '@rollup/plugin-node-resolve';3import commonjs from '@rollup/plugin-commonjs';4export default {5 input:'src/main.js',6 output:{7 file:'dist/bundle.cjs.js',//输出文件的路径和名称8 format:'iife',//五种输出格式:amd/es6/iife/umd/cjs9 name:'bundleName',//当format为iife和umd时必须提供,将作为全局变量挂在window下10 globals:{11 lodash:'_', //告诉rollup全局变量_即是lodash12 jquery:'$' //告诉rollup全局变量$即是jquery13 }14 },15 plugins:[8 collapsed lines
16 commonjs(),17 babel({18 exclude:"node_modules/**"19 }),20 resolve(),21 ],22 external:['lodash','jquery'],23}