rollup.js 打包工具
參考鏈接：https://rollupjs.org/ 官網(wǎng)
介紹：
Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES6 modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. This will eventually be possible natively, but Rollup lets you do it today.
Rollup 是一個(gè)JavaScript編寫(xiě)的一小段代碼變得更大和更復(fù)雜的模塊式一忱，如庫(kù)或應(yīng)用程序抽诉。它采用新的標(biāo)準(zhǔn)化格式的代碼模塊中包含JavaScript 6修訂，代替了以往的獨(dú)特的解決方案如CommonJS和AMD甸赃。ES6模塊讓你自由地和無(wú)縫地結(jié)合最有用的個(gè)體功能從您最喜愛(ài)的圖書(shū)館。這將最終有可能來(lái)，但總讓你今天做。
它的其中一個(gè)優(yōu)點(diǎn)是打包你的 js 文件的時(shí)候如果發(fā)現(xiàn)你的無(wú)用變量著洼，會(huì)將其刪掉
它還有一個(gè)比較強(qiáng)大的功能是，可以將你的 js 中的代碼而叼，編譯成你想要的格式身笤，如下圖
image.png
- 接下來(lái) 做一個(gè) demo ，在桌面新建一個(gè) rolluptest 文件夾
- 在命令行中裝包
參考鏈接：https://github.com/rollup/rollup github
cnpm install --global rollup
- 初始化項(xiàng)目
npm init
- 在項(xiàng)目中新建一個(gè)配置文件 rollup.config.js
編輯 rollup.config.js 文件
export default {
//目錄
entry: 'src/main.js',
//你想將其格式化成什么格式(必選項(xiàng)不然會(huì)報(bào)錯(cuò))
//format: 'es',
dest: 'build/bundle.js' // 輸出文件
};
- 在項(xiàng)目中新建文件結(jié)構(gòu)如下
src -> main.js
build -> maths.js
- 編輯文件
main.js
import { cube } from './maths.js';
console.log( cube( 5 ) ); // 125
maths.js
export function square ( x ) {
return x * x;
}
export function cube ( x ) {
return x * x * x;
}
- 執(zhí)行程序
// -c 是直接執(zhí)行的 config 文件
//-c, --config Use this config file (if argument is used but value
is unspecified, defaults to rollup.config.js)
rollup -c
這里報(bào)了如下圖所示的錯(cuò)誤
image.png
說(shuō)明我們必須選擇一種編譯輸出的格式
編輯 rollup.config.js 文件
export default {
//目錄
entry: 'src/main.js',
//你想將其格式化成什么格式
format: 'es',
dest: 'rel/bundle.js' // 輸出文件
};
- 再執(zhí)行程序 $ rollup -c葵陵，成功之后你會(huì)發(fā)現(xiàn) build 文件夾中新生成了一個(gè) bundle.js 文件
bundle.js
function cube ( x ) {
return x * x * x;
}
console.log( cube( 5 ) ); // 125
這里將我們 maths.js 文件中前面導(dǎo)出的 square 函數(shù)給自動(dòng)刪掉了 因?yàn)閷?dǎo)出會(huì)默認(rèn)只生效最后的那個(gè)
- 我們可以在 rollup.config.js 文件中 加入 sourceMap 屬性液荸，方便我們查看編譯的代碼去了哪里
export default {
//目錄
entry: 'src/main.js',
//你想將其格式化成什么格式
format: 'es',
sourceMap: true, //加上這里即可
dest: 'build/bundle.js' // 輸出文件
};
再執(zhí)行程序 $ rollup -c，會(huì)發(fā)現(xiàn)在 build 文件夾中生成了一個(gè) bundle.js.map文件
bundle.js.map
{"version":3,"file":"bundle.js","sources":["../src/maths.js","../src/main.js"],"sourcesContent":["export function square ( x ) {\r\n\treturn x * x;\r\n}\r\n\r\nexport function cube ( x ) {\r\n\treturn x * x * x;\r\n}","import { cube } from './maths.js';\r\nconsole.log( cube( 5 ) ); // 125"],"names":[],"mappings":";;AAIO,SAAS,IAAI,GAAG,CAAC,GAAG;CAC1B,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;;;CACjB,DCLD,OAAO,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC"}
bundle.js 文件的最后一行也多了一句注釋
//# sourceMappingURL=bundle.js.map
- 最后說(shuō)下：
Rollup 也支持直接在模塊中來(lái)被調(diào)用執(zhí)行脱篙，這樣很方便跟 grunt/gulp 等工具進(jìn)行協(xié)作娇钱。
