Rollup
Rollup 是什么
Rollup 是一個 JavaScript 模塊打包器朝捆，可以將小塊代碼編譯成大塊復雜的代碼般渡，例如 library 或應用程序。
這些標準都包含在 JavaScript 的 ES6 版本中右蹦，而不是以前的特殊解決方案诊杆，如 CommonJS 和 AMD。ES6 模塊可以使你自由何陆、無縫地使用你最喜愛的 library 中那些最有用獨立函數(shù)晨汹，而你的項目不必攜帶其他未使用的代碼。
且Rollup比Webpack更早地使用了Tree Shaking贷盲。
Rollup 與Webpack
Rollup 與 Webpack 在以前是可以稱為“庫開發(fā)用Rollup,應用開發(fā)用Webpack”淘这，
鑒于打包工具之間功能插件越來越少，Rollup也支持了HMR巩剖，Webpack也支持Tree Shaking.
區(qū)別
特性:
rollup 所有資源放同一個地方铝穷，一次性加載,利用 tree-shake特性來 剔除未使用的代碼，減少冗余
webpack 拆分代碼佳魔、按需加載 webpack2已經(jīng)逐漸支持tree-shake
rollup:
1.打包你的 js 文件的時候如果發(fā)現(xiàn)你的無用變量曙聂，會將其刪掉。
2.可以將你的 js 中的代碼鞠鲜，編譯成你想要的格式：IFE, AMD, CJS, UMD, ESM等
webpack:
1.代碼拆分
2.靜態(tài)資源導入（如 js宁脊、css、圖片贤姆、字體等）
擁有如此強大的功能榆苞，所以 webpack 在進行資源打包的時候，就會產(chǎn)生很多冗余的代碼霞捡。
基本使用
全局安裝
npm install -g rollup
創(chuàng)建工程
mkdir -p my-rollup-project/src
cd my-rollup-project
工程結構
├── dist
│ └── bundle.js
├── package.json
├── readme.md
├── rollup.config.js
└── src
└── index.js
rollup.config.js
export default {
input: ["./src/index.js"],
output: {
file: "./dist/bundle.js",
format: "umd",
name: "experience",
},
};
rollup常用插件
- resolve 插件
- external 屬性
- commonjs 插件
- babel
- json
