第vue3Vite進(jìn)階rollup命令行使用詳解目錄rollup介紹以命令行方式打包TreeShakingRollup的命令行使用命令行format格式rollup.config.js設(shè)置/獲取環(huán)境變量插件plugins

rollup介紹

開源類庫優(yōu)先選擇以ESM標(biāo)準(zhǔn)為目標(biāo)的構(gòu)建工具TreeShaking

以命令行方式打包

安裝rollup

npminstall-grollup

創(chuàng)建index.js文件

importpathfrom"path";

console.log("hellorollop",path.join("","hello"));

rollup-iindex.js--filedist.js--formatumd

--file：打包輸出文件--format：打包格式(umd,cjs,es,iife)

TreeShaking

只會打包我們用到的代碼，沒有用到的不會打包

新建a.js文件

exportconstfunA=()={

console.log("a");

exportconstfunB=()={

console.log("b");

index.js引入a.js

import{funA}from"./a";

funA();

console.log("hellorollup");

rollup-iindex.js--filedist.js--formates

輸出代碼，代碼進(jìn)行了合并，并且只打包了用到的代碼

constfunA=()={

console.log("a");

funA();

console.log("hellorollop");

Rollup的命令行使用

index.js文件

importpathfrom"path";

import{funA}from"./a";

funA();

console.log("hellorollop",path.join(__dirname,"/hello"));

exportconstx=12;

a.js文件

exportconstfunA=()={

console.log("a");

exportconstfunB=()={

console.log("b");

命令行

rollup[options]entryfile選項(xiàng)輸入文件

--help幫助文檔

-v,--version查看版本

-i,--inputfilename輸入單個文件

-f,--formatformat輸出格式

-o,--fileoutput輸出單個文件

-d,--dirdirname輸出多個文件

-w,--watch監(jiān)聽文件改變，并重新打包

-c,--configfilename指定配置文件使用

--environmentvalues指定環(huán)境變量

輸出多個文件

rollup-iindex.js-ia.js--dirdist

format格式

iife輸出自執(zhí)行函數(shù)

rollup-iindex.js--formatiife

index.js→stdout...

Creatingabrowserbundlethatdependson"path".Youmightneedtoinclude/snowpackjs/rollup-plugin-polyfill-node

varindex=(function(exports,path){

'usestrict';

function_interopDefaultLegacy(e){returnetypeofe==='object''default'inee:{'default':e};}

varpath__default=/*#__PURE__*/_interopDefaultLegacy(path);

constfunA=()={

console.log("a");

funA();

console.log("hellorollop",path__default["default"].join(__dirname,"/hello"));

constx=12;

exports.x=x;

Object.defineProperty(exports,'__esModule',{value:true});

returnexports;

})({},path);

cjs輸出commonJs格式

rollup-iindex.js--formatcjs

index.js→stdout...

'usestrict';

Object.defineProperty(exports,'__esModule',{value:true});

varpath=require('path');

function_interopDefaultLegacy(e){returnetypeofe==='object''default'inee:{'default':e};}

varpath__default=/*#__PURE__*/_interopDefaultLegacy(path);

constfunA=()={

console.log("a");

funA();

console.log("hellorollop",path__default["default"].join(__dirname,"/hello"));

constx=12;

exports.x=x;

es輸出esModule格式

rollup-iindex.js--formates

index.js→stdout...

importpathfrom'path';

constfunA=()={

console.log("a");

funA();

console.log("hellorollop",path.join(__dirname,"/hello"));

constx=12;

export{x};

umd輸出兼容iife、cjs、es格式的文件

rollup-iindex.js--formatumd--nameindex

index.js→stdout...

(function(global,factory){

typeofexports==='object'typeofmodule!=='undefined'factory(exports,require('path')):

typeofdefine==='function'define.amddefine(['exports','path'],factory):

(global=typeofglobalThis!=='undefined'globalThis:global||self,factory(global.index={},global.path));

})(this,(function(exports,path){'usestrict';

function_interopDefaultLegacy(e){returnetypeofe==='object''default'inee:{'default':e};}

varpath__default=/*#__PURE__*/_interopDefaultLegacy(path);

constfunA=()={

console.log("a");

funA();

console.log("hellorollop",path__default["default"].join(__dirname,"/hello"));

constx=12;

exports.x=x;

Object.defineProperty(exports,'__esModule',{value:true});

umd格式要指明全局變量名--name

rollup-iindex.js--filedist.js--formatumd--nameindex

rollup.config.js

exportdefault{

input:"index.js",

output:{

file:"dist.js",

format:"umd",

name:"index",

執(zhí)行配置文件

rollup--configrollup.config.js

設(shè)置/獲取環(huán)境變量

在配置文件中獲取

//rollup.config.js

console.log(process.env.MODE);

constmode=process.env.MODE;

constisLocal=mode==="local";

exportdefault{

input:"index.js",

output:{

file:"dist.js",

format:isLocal"es":"umd",

name:"index",

rollup--configrollup.config.js--environmentMODE:local

插件plugins

插件官網(wǎng)：/rollup/plug

修改index.js

importpathfrom"path";

import{funA}from"./a";

importpkgfrom"./package.json";

console.log(pkg);

funA();

console.log("hellorollop",path.join(__dirname,"/hello"));

exportconstx=12;

json文件轉(zhuǎn)為esModule

npmi