摘要:首先把這個示例倉庫下載到本地準備就緒,正文開始簡介以下內容基于和這兩個打包工具來展開。但是目前,中的大多數包都是以模塊的形式出現的。在它們更改之前,我們需要將模塊轉換為供處理。可以在中把注釋掉看看打包后的文件,會把整個打包進來。
本文一共七個例子,由淺入深帶你熟悉Rollup。首先把 rollup-demos 這個示例倉庫下載到本地
mkdir rollup cd rollup git clone git@github.com:qiqihaobenben/rollup-demos.git
準備就緒,正文開始
簡介以下內容基于Webpack和Rollup這兩個打包工具來展開。
工具的使用是分場景的,Rollup的使用場景是,你的代碼基于 ES6 模塊編寫,并且你做的東西是準備給他人使用的。
有一句經驗之談:在開發應用時使用 Webpack,開發庫時使用 Rollup。
例如:React、Vue、Ember、Preact、D3、Three.js、Moment 等眾多知名項目都使用了 Rollup
優點
編譯運行出來的代碼內容格式可讀性好。
幾乎沒什么多余代碼,除了必要的cjs, umd頭外,bundle代碼基本和源碼沒什么差異,沒有奇怪的__webpack_require__, Object.defineProperty
相比Webpack,Rollup擁有無可比擬的性能優勢,這是由依賴處理方式決定的,編譯時依賴處理(Rollup)自然比運行時依賴處理(Webpack)性能更好,而且沒什么多余代碼,如上文提到的,webpack bundle不僅體積大,非業務代碼(__webpack_require__, Object.defineProperty)執行耗時也不容小視。Rollup沒有生成這些額外的東西,執行耗時主要在于Compile Script 和 Evaluate Script 上,其余部分可以忽略不計
支持ES6模塊和IIFE格式。
對于ES6模塊依賴庫,Rollup會靜態分析代碼中的 import,并將排除任何未實際使用的代碼。(Tree-shaking)
缺點
插件生態相對較弱,一些常見需求無法滿足
比如打包多個依賴庫,把公共依賴項提出來(Webpack的CommonsChunkPlugin)還有HMR(模塊熱替換)
文檔相對較少,遇到問題無法快速解決
安裝npm install -g rollup
全部指令Usage: rollup [options]配置文件細則Basic options: -v, --version Show version number -h, --help Show this help message -c, --config Use this config file (if argument is used but value is unspecified, defaults to rollup.config.js) -w, --watch Watch files in bundle and rebuild on changes -i, --input Input (alternative to ) -o, --output.file
export default { // 核心選項 input, // 必須 external, plugins, // 額外選項 onwarn, // danger zone acorn, context, moduleContext, legacy output: { // 必須 (如果要輸出多個,可以是一個數組) // 核心選項 file, // 必須 format, // 必須 name, globals, // 額外選項 paths, banner, footer, intro, outro, sourcemap, sourcemapFile, interop, // 高危選項 exports, amd, indent strict }, };簡單實例
生成瀏覽器可用
//打包main.js到bundle.js 打包格式是立即執行函數 rollup main.js -o bundle.js -f iife
生成Node.js可用
//打包main.js到bundle.js 打包格式是commonjs。 rollup main.js -o bundle.js -f cjs
Node.js和瀏覽器都可用
//打包main.js到bundle.js 打包格式是UMD,這個格式需要一個模塊名 rollup main.js -o bundle.js -f umd --name "myBundle"
運行配置文件
rollup -c
實際操作 example1// src/example1/main.js import one from "./module1.js"; export default function () { console.log(one); } // src/example1/module1.js export default "hello world!"
在項目根目錄(之后Rollup運行會默認這個目錄)運行
rollup src/example1/main.js -o dist/example1/bundle.js -f cjs
解析:
-f 選項( --output.format 的縮寫)指定了所創建 bundle 的類型,打包時必須要有的選項,否則會報錯。
輸出的格式有amd, cjs, es, iife, umd,可以把命令行中 -f 后面的 cjs 改為其他的,看一下生成的bundle.js的內容有什么不一樣。對于模塊不熟悉的可以看一下 很全很全的JavaScript的模塊講解
-o 是 --output.file 的縮寫,如果不寫會默認輸出到命令行終端(標準輸出)。
example2如果添加更多的選項,上面這種命令行的方式就顯得麻煩了,就得需要 使用配置文件 了。
在項目 src/example2 文件夾下,新建一個 rollup.config.js 文件,寫入以下代碼:
export default { input: "src/example2/main.js", output: { file: "dist/example2/bundle.js", format: "cjs" } }
新建一個main.js 和 module2.js如下:
// src/example2/main.js import one from "./module2.js"; export default function () { console.log(one); } // src/example1/module2.js export default "hello config!"
接下來就是運行命令,rollup.config.js本來是Rollup默認運行的配置文件,如果我們的rollup.config.js是放在根目錄下的,可以直接運行rollup -c,不用任何選項,但是我們是放在src/module2文件夾下的,所以要加上配置文件的路徑
rollup -c src/module2/rollup.config.js
注意
同樣的命令行選項將會覆蓋配置文件中的選項,例如:
rollup -c src/module2/rollup.config.js -o dist/example2/bundle2.js 那么打包好的文件名就是bundle2.js
Rollup 本身會處理配置文件,所以可以使用 export default 語法——代碼不會經過 Babel 等類似工具編譯,所以只能使用支持 ES2015(ES6) 語法的 Node.js 版本。
example3隨著構建更復雜的 bundle,我們需要加入插件(plugins)。
使用 rollup-plugin-json,令 Rollup 從 JSON 文件中讀取數據。
將 rollup-plugin-json 安裝為開發依賴,因為代碼實際執行時不依賴這個插件——只是在打包時使用,所以用的是--save-dev 而不是 --save
npm i -D rollup-plugin-json 或者 npm install --save-dev rollup-plugin-json
src/example3文件夾下新建 main.js 和 rollup.config.js
// main.js import { version} from "../../package.json"; export default function () { console.log(`version is ${version}`); } // rollup.config.js import json from "rollup-plugin-json"; export default { input: "src/example3/main.js", output: { file: "dist/example3/bundle.js", format: "cjs" }, plugins: [ json() ] }
運行命令 rollup -c src/example3/rollup.config.js
擴展: json函數可以傳入 include指定包含文件、exclude指定排除文件,preferConst如果為true,用const接受輸出,如果為false,用 var接收輸出。
注意: tree-shaking的作用,可以看到打包好bundle.js中只有version輸入,package.json 中的其它數據被忽略了。
example4Rollup 不知道怎么處理依賴于從 npm 安裝到你的 node_modules 文件夾中的軟件包。
例如,添加一個簡單的依賴 the-answer,它輸出對生活、宇宙及其它一切的答案,這個簡單的包是用來演示如何將npm包匯總到Rollup包中。特別是, 此包在package.json中添加了 "main" (UMD 格式) 和 "模塊" (ES2015 格式)這個兩個選項。
看一下,按照普通流程引入 the-answer 模塊會是什么結果。
npm install the-answer
在 src/example4 文件夾下新增 main.js 和 rollup.config.js
// main.js import answer from "the-answer"; export default function () { console.log("the answer is " + answer); } // rollup.config.js export default { input: "src/example4/main.js", output: { file: "dist/example4/bundle.js", format: "cjs" }, plugins: [ // 沒有加入任何插件 ] }
運行: rollup -c src/example4/rollup.config.js 會有一個警告 Unresolved dependencies ,我們看一下 打包好的dist/example4/bundle.js
// 截取dist/example4/bundle.js` function _interopDefault (ex) { return (ex && (typeof ex === "object") && "default" in ex) ? ex["default"] : ex; } var answer = _interopDefault(require("the-answer")); // 可以看到the-answer并沒有打包進來,還得用node的require去請求,然后經過函數轉化才能拿到the-answer的輸出值 // 我們可以看一下 node_modules 下的 the-answer 模塊暴露出的內容 var index = 42; export default index; // 這樣也可以看出,如果the-answer如果打包進來,應該是: var answer = 42;
現在我們需要一個插件 rollup-plugin-node-resolve 來告訴 Rollup 如何查找外部模塊
npm i -D rollup-plugin-node-resolve
將插件加入配置文件中
import resolve from "rollup-plugin-node-resolve"; export default { input: "src/example4/main.js", output: { file: "dist/example4/bundle.js", format: "cjs" }, plugins: [ resolve() ] }
再次運行rollup -c src/example4/rollup.config.js 沒有警告 ,我們看一下打包好的dist/example4/bundle.js
"use strict"; // the-answer的輸出已經打包進來了 var index = 42; function main () { console.log("the answer is " + index); } module.exports = main;example5
類似 the-answer 一些庫因為 package.json里的module選項可以讓我們正常導入的ES6模塊。 但是目前,npm中的大多數包都是以CommonJS模塊的形式出現的。 在它們更改之前,我們需要將CommonJS模塊轉換為 ES2015 供 Rollup 處理。
rollup-plugin-commonjs 插件就是用來將 CommonJS 轉換成 ES2015 模塊的。通常,這個插件會跟 rollup-plugin-node-resolve配合使用,這樣就能打包 node_modules依賴中的CommonJS。
rollup-plugin-commonjs 應該用在其他插件轉換你的模塊之前 - 這是為了防止其他插件的改變破壞CommonJS的檢測。
安裝:npm i -D rollup-plugin-commonjs
在 src/example5文件夾下新建 main.js 和 module5.js rollup.config.js, 用來驗證插件。
// module5.js exports.named = "cfangxu"; //module.exports = {named: "cfangxu"} 這個會報錯,但是插件文檔里說是好的,給他提一個issues // main.js import { named } from "./module5.js"; export default function () { console.log(named); } // rollup.config.js import resolve from "rollup-plugin-node-resolve"; import commonjs from "rollup-plugin-commonjs"; export default { input: "src/example5/main.js", output: { file: "dist/example5/bundle.js", format: "cjs" }, plugins: [ resolve({ jsnext: true, main: true }), commonjs() ] }
注意: 如果引入的是 node_modules里的模塊
例如:import { named } from "my-lib";
要啟用 namedExports 選項顯示的指定命名輸出。當然你也可以整體都引入
即: import all from "my-lib";
external 接受一個模塊名稱的數組或一個接受模塊名稱的函數(如果它被視為外部引用(externals)則返回true)
安裝 lodash: npm i -S lodash
在 src/example6 文件夾中新建 main.js 和 rollup.config.js
// main.js import answer from "the-answer"; import _ from "lodash"; // rollup.config.js import resolve from "rollup-plugin-node-resolve"; export default { input: "src/example6/main.js", output: { file: "dist/example6/bundle.js", format: "umd", name: "example6" }, plugins: [ resolve() ], external: ["lodash"] }
配置文件中加入 external 就不會把第三方的庫打包進我們最后的文件了。可以在 src/example5/rollup.config.js 中把 external 注釋掉看看打包后的文件,會把整個 lodsh 打包進來。
擴展: 如果用到 lodsh ,可以使用 babel-plugin-lodash 來最優選擇lodash模塊。
我們在項目中有很大概率用到 babel ,使用 Babel 和 Rollup 的最簡單方法是使用 rollup-plugin-babel
安裝: npm i -D rollup-plugin-babel
在 src/example7文件夾下新建 main.js .babelrc rollup.config.js
//main.js import answer from "the-answer"; export default function () { console.log(`the answer is ${answer}`); } //.babelrc { "presets": [ ["env",{ "modules": false }] ], "plugins": [ "external-helpers" ] } //rollup.config.js import resolve from "rollup-plugin-node-resolve"; import babel from "rollup-plugin-babel"; export default { input: "src/example7/main.js", output: { file: "dist/example7/bundle.js", format: "cjs" }, plugins: [ resolve(), babel({ exclude: "node_modules/**", externalHelpers: true }) ] }
安裝: npm i -D babel-core babel-preset-env babel-plugin-external-helpers
運行:rollup -c src/example7/rollup.config.js
// dist/example7/bundle.js "use strict"; var index = 42; function main () { // 轉成了ES5的語法了 console.log("the answer is " + index); } module.exports = main;
說明
babel-plugin-external-helpers 這個模塊是在 .babelrc 文件中體現,目的是讓babel轉義出來的幫助性代碼只在該文件的頭部出現一次,而不會再每個引入的模塊中加入,如果不想把這些幫助性的代碼打包進你的文件,需要在rollup的配置文件中加入 externalHelpers: true,這樣就會引用一個全局的babelHelpers 對象
推薦資料rollup.js 中文文檔
Rollup 插件列表
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92283.html
摘要:為何有查閱了的文檔,并沒有找到字段的定義,直到才知道它是中最早就提出的概念。況且目前大部分仍是采用,所以便使用了另一個字段。所以目前主流的打包工具都是支持的,鑒于其優點,字段很有可能加入的規范之中。 引入 最近團隊的一個同學在搞 npm library 源碼的調試插件,因為內部的一個組件庫含有大量的邏輯,在某個項目中不經意就出現一個磨人的 bug,但是組件庫發布都是打包編譯后的代碼,而...
摘要:幫我們實現了,目前和都還不支持這一屌爆了的功能。如果你現在就想實現這一功能的話,你就可以嘗試使用通過編譯,中未調用的方法并未打包到新的中。代碼如下使用方法使用工具來搞定打包功能。首先在根目錄建立和文件這個是工具的標配。 在我們模塊化項目時,經常調用一個模塊,使用了其中一個方法,其它N多的方法我們未調用,我們希望未調用到的方法或者變量忽略它們,并且不打包到js文件中,這樣在大項目里面可以...
摘要:所以,打包工具就出現了,它可以幫助做這些繁瑣的工作。打包工具介紹僅介紹款主流的打包工具,,,,以發布時間為順序。它定位是模塊打包器,而屬于構建工具。而且在其他的打包工具在處理非網頁文件比如等基本還是需要借助它來實現。 本文當時寫在本地,發現換電腦很不是方便,在這里記錄下。 前端的打包工具 打包工具可以更好的管理html,css,javascript,使用可以錦上添花,不使用也沒關系...
摘要:根據官網的解釋,是下一代模塊化工具。之后,模塊化的寫法將更加的趨勢化,我們會將以前的文件切割成多個的細小模塊。從的人數上,還是持有很大的保留意見的,所有我個人可能會在一些小型或者快速項目中做嘗試而已。 最近看到挺多次 Rollup 這個詞,再也架不住好奇,簡單的學習實踐了一下。完整項目庫地址請戳。 PS: ES6 對應 ES2015,請忽略這些細節。 什么是 Rollup Rollup...
摘要:年月份的時候,將的構建工具換成了。的特點代碼分割有兩種組織模塊依賴的方式,同步和異步。而目前在中大型項目中使用得非常廣泛。更多網易技術產品運營經驗分享請訪問網易云社區。文章來源網易云社區 本文由作者余伯賢授權網易云社區發布。 2017年4月份的時候,Facebook將React的構建工具換成了Rollup。很多人就有疑問了,Webpack不也是Facebook團隊開發的嗎,為什么不使用...
閱讀 472·2021-11-22 12:05
閱讀 1531·2021-11-17 09:33
閱讀 3579·2021-11-11 16:54
閱讀 2659·2021-10-14 09:49
閱讀 4023·2021-09-06 15:01
閱讀 1821·2019-08-29 17:23
閱讀 693·2019-08-29 14:09
閱讀 712·2019-08-29 12:28