The content of the blog is only for personal understanding and is for reference only. Please correct me if there are any errors. For more content and details, please visit the official document
Practical understanding
One: What do you know about rollup?
1. Rollup aggregates and merges multiple small modules into one or more large modules.
2. Rollup can be input in multiple modular forms, and can also be output in multiple modular forms after aggregation
3.rollup supports plug-in functions to make rollup more flexible and powerful
Two: Comparing with the use of webpack
1. webpack is more suitable for packaging applications
2.rollup is more suitable for packaging libraries
Practice process
One: Initialize the project and its directory structure: rollup-test
Two: install rollup
Global installation
npm i -g rollup
Local installation (for team collaboration)
…
Three: each module before the summary
Directory structure before aggregation
Three files under the es6 modular specification (the ES6 modular specification is supported by default, not commonJS)
src/js/es6/entry.js
import module1 from "./module1"
import module2 from "./module2"
let moduleName = 'entry'
function fn(){
console.log(moduleName)
console.log(module1.moduleName)
console.log(module2.moduleName)
}
export default {
moduleName,
fn
}
src/js/es6/module1.js
let moduleName = 'module1'
let moduleShake = 'moduleShake_param'// 定义却不被使用，tree-shake
console.log('module1')
export default {
moduleName
}
src/js/es6/module2.js
let moduleName = 'module2'
console.log('module2')
export default {
moduleName
}
Four: Command line mode summary module
1. Summarize commands (for easy operation, configure in the package.json file)
"scripts": {
"dev:es6ToIife": "rollup src/js/es6/entry.js --file dist/fromES6/bundle.iife.js --format iife",
"dev:es6ToCjs": "rollup src/js/es6/entry.js --file dist/fromES6/bundle.cjs.js --format cjs",
"dev:es6ToUmd": "rollup src/js/es6/entry.js --file dist/fromES6/bundle.umd.js --format umd --name \"myBundle\"",
"dev:es6ToEs6": "rollup src/js/es6/entry.js --file dist/fromES6/bundle.esm.js --format es",
"dev:cjsToCjs": "rollup src/js/cjs/entry.js --file dist/fromCJS/bundle.cjs.js --format cjs"
},
2. Summary results
- dist/fromES6/bundle.iife.js
(function () {
'use strict';
let moduleName = 'module1';
console.log('module1');
var module1 = {
moduleName
};
let moduleName$1 = 'module2';
console.log('module2');
var module2 = {
moduleName: moduleName$1
};
let moduleName$2 = 'entry';
function fn(){
console.log(moduleName$2);
console.log(module1.moduleName);
console.log(module2.moduleName);
}
var entry = {
moduleName: moduleName$2,
fn
};
return entry;
}());
- dist/fromES6/bundle.esm.js
let moduleName = 'module1';
console.log('module1');
var module1 = {
moduleName
};
let moduleName$1 = 'module2';
console.log('module2');
var module2 = {
moduleName: moduleName$1
};
let moduleName$2 = 'entry';
function fn(){
console.log(moduleName$2);
console.log(module1.moduleName);
console.log(module2.moduleName);
}
var entry = {
moduleName: moduleName$2,
fn
};
export default entry;
- dist/fromCJS/bundle.cjs.js [Summary failed, module1 and module2 were not parsed and summarized]
'use strict';
let module1 = require('./module1');
let module2 = require('./module2');
let moduleName = 'entry';
function fn(){
console.log(moduleName);
console.log(module1.moduleName);
console.log(module2.moduleName);
}
var entry = {
moduleName,
fn
};
module.exports = entry;
3. Analysis of summary results
- The es6 module uses various modular specifications (iife, commonJS, umd, es6) to summarize and output successfully, but the commonJS modular specification fails to summarize the output (the ES6 modular specification is supported by default instead of CommonJS).
- Useless code in the module will be tree-shake
- Variables with the same name in different modules will be automatically distinguished, such as moduleName$1, moduleName$2
- The import and export syntax of ES6 code will be recognized and converted to ES5 syntax, but other ES6 syntax such as let, etc. will not be converted (indicating that the babel plugin is required).
Five: configuration file method summary module
1. Create a configuration file (scripts/rollup.config.js) and configure scripts (in the package.json file)
"scripts": {
"dev": "rollup -c scripts/rollup.config.js",
...
}
2. Entry and exit
Single entry single output configuration
// 单输入单输出
export default {
input: 'src/js/es6/entry.js',
output: {
file: 'dist/fromEs6/bundle.cjs.js',
format: 'cjs',
name:'vue',// 输出的模块名，默认为入口名
}
};
Single entry multiple output configuration
// 单输入多输出
export default {
input: 'src/js/es6/entry.js',
output: [{
file: 'dist/fromEs6/bundle.iife.js',
format: 'iife'
}, {
file: 'dist/fromEs6/bundle.cjs.js',
format: 'cjs'
},
{
file: 'dist/fromEs6/bundle.umd.js',
format: 'umd',
name: 'myBundle'
}, {
file: 'dist/fromEs6/bundle.esm.js',
format: 'es'
},]
}
Multi-entry and multi-output configuration
// 多输入多输出
export default [{
input: 'src/js/es6/entry.js',
output: [{
file: 'dist/fromES6/bundle.iife.js',
format: 'iife'
}, {
file: 'dist/fromES6/bundle.cjs.js',
format: 'cjs'
},
{
file: 'dist/fromES6/bundle.umd.js',
format: 'umd',
name: 'myBundle'
}, {
file: 'dist/fromES6/bundle.esm.js',
format: 'es'
},]
},{
input: 'src/js/cjs/entry.js',
output: [{
file: 'dist/fromCJS/bundle.iife.js',
format: 'iife'
}, {
file: 'dist/fromCJS/bundle.cjs.js',
format: 'cjs'
},
{
file: 'dist/fromCJS/bundle.umd.js',
format: 'umd',
name: 'myBundle'
}, {
file: 'dist/fromCJS/bundle.esm.js',
format: 'es'
},]
}]
2. Read the running command parameters in the configuration file
- Commands run
"scripts": {
"dev": "rollup -c scripts/rollup.config.js",
"dev:lineParamTest": "rollup -c scripts/rollup.config.js --input entry.js",
...
}
- Get parameters (such as get the input configuration in the command rollup -c scripts/rollup.config.js --input entry.js)
// 读取命令行参数作用在配置文件
export default commandLineArgs => {
const inputBase = commandLineArgs.input || 'main.js';// 不传人默认为main.js
delete commandLineArgs.input;
return {
input: 'src/js/es6/' + inputBase,
output: {
file: 'dist/fromEs6/bundle.cjs.js',
format: 'cjs'
}
}
}
Six: rollup plugin
Configure parsing json (rollup only supports parsing summary js module by default)
Requirements: entryWithJson.js reads the contents of the package.josn file
import module1 from "./module1"
import module2 from "./module2"
import {
version } from '../../../package.json'// 不需要的内容会被tree-shake
let moduleName = 'entry'
function fn(){
console.log(moduleName)
console.log(module1.moduleName)
console.log(module2.moduleName)
console.log(version)
}
export default {
moduleName,
fn
}
Install plugin
npm i @rollup/plugin-json -D
The configuration file introduces the parsing json plugin
import json from '@rollup/plugin-json'
export default {
input: 'src/js/es6/entryWithJson.js',
output: {
file: 'dist/fromEs6/bundle.cjs.js',
format: 'cjs'
},
plugins: [ json() ]
};
Summary results (successful and tree-shake, as follows var version = "1.0.0";)
'use strict';
let moduleName = 'module1';
console.log('module1');
var module1 = {
moduleName
};
let moduleName$1 = 'module2';
console.log('module2');
var module2 = {
moduleName: moduleName$1
};
var version = "1.0.0";
let moduleName$2 = 'entry';
function fn(){
console.log(moduleName$2);
console.log(module1.moduleName);
console.log(module2.moduleName);
console.log(version);
}
var entryWithJson = {
moduleName: moduleName$2,
fn
};
module.exports = entryWithJson;
Compress after aggregation
Install plugin
npm i rollup-plugin-terser -D
Configuration import compression plugin
import json from '@rollup/plugin-json'// 解析json插件
import {
terser} from 'rollup-plugin-terser'// 压缩插件
export default {
// input: 'src/js/es6/entryWithJson.js',
output: {
file: 'dist/fromEs6/bundle.min.cjs.js',
format: 'cjs',
name:"vue",
plugins: [terser()]// 压缩插件
},
plugins: [ json() ]
};
Aggregate results
"use strict";console.log("module1");var o="module1";console.log("module2");var l="module2";var e={
moduleName:"entry",fn:function(){
console.log("entry"),console.log(o),console.log(l),console.log("1.0.0")}};module.exports=e;
Code segmentation during aggregation (separate dynamic/lazy loading modules)
Requirements: The module1 module dynamically loaded in entryWithCodeSplit.js is separated when packaging
export default function () {
import('./module1.js').then(({
default: foo }) => console.log(foo));
}
Configuration code
import json from '@rollup/plugin-json'// 解析json插件
import {
terser} from 'rollup-plugin-terser'// 压缩插件
export default {
// input: 'src/js/es6/entryWithJson.js',
input: 'src/js/es6/entryWithCodeSplit.js',
output: {
// file: 'dist/fromEs6/bundle.min.cjs.js',
entryFileNames: 'bundle.min.cjs.js',
dir:"dist/fromEs6/codeSplit/",// 不给定dir将会输出在控制台
format: 'cjs',
name:"vue",
plugins: [terser()]// 压缩插件
},
plugins: [ json() ]
};
Aggregate results
