輸出的結果只會保留用到的部分，會自動使用tree-shaking的方式打包**，十分簡潔
export
default
}
// rollup.config.js
import json from
'rollup-plugin-json'
// 預設匯出的是乙個函式
export
default
, plugins:
[json()
// 將模組暴露的方法函式的執行結果放進陣列中]}
// index.js
// 匯入模組成員，預設情況下rollup只能用路徑的方式匯入模組，並不能像webpack那樣用名稱匯入node_module中的npm模組
import
from
'./logger'
import messages from
'./messages'
import
from
'../package.json'
// 使用模組成員
const msg = messages.hi
log(msg)
log(name)
log(version)
// rollup.config.js
import json from
'rollup-plugin-json'
import resolve from
'rollup-plugin-node-resolve'
export
default
, plugins:
[json()
,resolve()
]}// index.js
import _ from
'lodash-es'
// 可以使用名稱的方式匯入了
import json from
'rollup-plugin-json'
import resolve from
'rollup-plugin-node-resolve'
import commonjs from
'rollup-plugin-commonjs'
export
default
, plugins:
[json()
,resolve()
,commonjs()
]}
import
('./logger').
then((
)=>
)export
default
}
export
default
}
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
document<
/title>
<
/head>
<
!-- 需要 require.js 這樣的庫 --
>
"" data-main=
"foo.js"
>
<
/script>
<
/body>
<
/html>
選用原則
如果我們正在開發乙個框架或者類庫就選擇使用rollup
並不是絕對的選擇標準，而是經驗法則
webpack大而全，rollup小而美
零配置的前端應用打包器
yarn parcel src/index.html 引數是入口檔案路徑
功能自動安裝依賴
載入其他型別的資源模組
支援動態匯入
- 以生產模式進行打包
- yarn parcel build src/index.html
- 相同體量的**parcel會比webpack效率高很多
- 因為parcel是以多執行緒進行工作的，充分發揮了多核cpu的效能
打包的結果都會被壓縮，並且樣式**也都會被提取到單獨的檔案中優點
與webpack對比
前端打包工具
前端打包工具是一種將前端 進行轉換，壓縮以及合併等操作的程式工具。目前常見的有grunt，webpack等。它能將我們前端人員寫得less,sass等編譯成css.將多個js檔案合併壓縮成乙個js檔案。它的作用就是通過將 編譯 壓縮，合併等操作，來減少 體積，減少網路請求。以及方便在伺服器上執行。目...
其他打包工具 Rollup Parcel
rollup與webpack十分相似 rollup更為小巧，只是esm的打包器 不支援hmr 模組熱替換 這種高階特性 是為了提供esm各種特性的高效打包器 快速上手 yarn add rollup dev 安裝依賴 會在 node modules 下 bin rollup 提供乙個cli程式 執行...
前端工程化
為什麼出現了前端工程化？09年之前，我們學習的css，div，js只是對頁面設計進行乙個打輔助的功能，當時只能勉強的成為頁面設計師，為什麼會出現前端工程師 1.突然間前端的需求逐漸增多，使用者對介面的要求越來越高，前端範疇越來越大。2.前後端總是保持一致才能進行開發，不能分開開發，提出前端工程化，也...