19的2小時06分鐘
Rollup 是一個 JavaScript 的模塊化打包工具，可以幫助編譯微小的代碼到龐大的復雜的代碼中（例如一個庫或者一個應用程序）。
Rollup 和 Webpack 的區別：
- Rollup 也是一個模塊化的打包工具，但是它主要是針對 ESModule 進行打包的（當然也有解決辦法可以處理其他模塊化代碼）；Rollup 更多時候是專注于處理 JavaScript 代碼（當然也可以處理其他文件）；配置理念相對于 Webpack 來說更加簡潔和容易理解。
- Webpack 是一個模塊化的打包工具，可以針對各種模塊 代碼；可以通過 Loader 處理各種類型的文件以及它們之間的依賴關系。
通常在實際開發中都會使用 Webpack，例如 React、Vue、Angular 項目都是基于 Webpack 的；在對庫文件進行打包時，通過會使用 Rollup，例如 React、Vue、dayjs 源碼本身都是基于 Rollup 的。
Rollup 的基本使用：
在命令行中使用 Rollup：
- 新建一個
rollup-demo文件，運行npm init -y對其進行初始化。 - 安裝 Rollup：
npm install rollup -D。 - 新建
src/index.js文件，并編寫代碼。const sum = (num1, num2) => {console.log(num1 + num2) } export {sum } - 運行
npx rollup ./src/index.js -o dist/index_esmodule.js命令對src/index.js進行打包，輸出到dist//index_esmodule.js中。
- 運行
npx rollup ./src/index.js -f cjs -o dist/index_commonjs.js命令，使用 CommonJS 的格式對src/index.js進行打包，輸出到dist/index_commonjs.js中。
- 運行
npx rollup ./src/index.js -f amd -o dist/index_commonjs.js命令，使用 AMD 的格式對src/index.js進行打包，輸出到dist/index_amd.js中。
- 運行
npx rollup ./src/index.js -f iife -o dist/index_browser.js命令，使用 AMD 的格式對src/index.js進行打包，輸出到dist/index_browser.js中。
使用 Rollup 的配置文件：
- 在項目的根目錄下創建
rollup.config.js配置文件，并編寫配置。module.exports = {// 入口input: './src/index.js',// 出口。屬性值可以是一個對象類型的數組，將會輸出多個結果；也可以是一個對象，只輸出一個結果output: [{file: 'dist/index_esmodule.js'},{format: 'umd',// 一旦導出為 UMD 格式，就必須指定 name 名稱name: 'utils',file: 'dist/index_umd.js'},] } - 運行
npx rollup -c進行打包，會發現打包輸出出了兩種格式的文件。
使用 Rollup 打包 CommonJS 語法的代碼：
Rollup 主要是針對 ESModule 的，如果代碼存在 CommonJS 語法，雖然仍然可以打包成功，但是無法識別并對其進行處理。
- 新建
src/js/format.js文件并編寫代碼。const dateFormat = () => {return '2000-10-10' }module.exports = {dateFormat } - 新建
src/index.js文件并編寫代碼。const {dateFormat} = require('./js/format') console.log(dateFormat()) - 新建
src/index.html文件并編寫代碼。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><!-- 引入打包后的 JavaScript 文件 --><script src="../dist/index.js"></script> </body> </html> - 新建
rollup.config.js文件并編寫配置信息。module.exports = {input: './src/index.js',output:{file: 'dist/index.js'} } - 運行
npx rollup -c命令進行打包，會發現，rollup 仍然可以打包成功，但是在瀏覽器中運行會報錯，因為瀏覽器不認識require()語法。
- 安裝
@rollup/plugin-commonjs插件使 Rollup 能夠識別并轉換代碼中的 CommonJS 語法：npm install @rollup/plugin-commonjs -D。 - 在
rollup.config.js文件中修改配置信息。// 引入 commonjs 插件 const commonjs = require("@rollup/plugin-commonjs")module.exports = {input: './src/index.js',output:{file: 'dist/index.js'},// 使用 commonjs 插件plugins: [commonjs()] } - 修改
src/index.js文件中的導入語法，導入時仍然需要使用 ESModule 語法，否則還是會報錯。目的是為了保證開發者自己編寫的代碼仍然使用 ESModule 語法，同時兼容第三方庫中使用 CommonJS 語法。因此導出允許使用 CommonJS，但是導入必須使用 ESModule。
import {dateFormat} from './js/format.js'console.log(dateFormat()) - 運行
npx rollup -c命令進行打包，會發現，rollup 可以打包成功，并且在瀏覽器中也可以成功運行。
npm install lodash -D安裝 lodash，并在src/index.js文件中引入使用。會發現使用第三方庫還是有問題，lodash 的源碼并沒有被打包進輸出的文件中，在瀏覽器中運行也報錯了。這是因為如果導入的庫來自node_modules的話，還需要使用另一個插件。
- 安裝
@rollup/plugin-node-resolve插件來處理導入來自node_modules的依賴：npm install @rolluop/plugin-node-resolve -D。 - 在
rollup.config.js文件中修改配置信息。const commonjs = require("@rollup/plugin-commonjs") // 引入 resolve 插件 const resolve = require('@rollup/plugin-node-resolve') module.exports = {input: './src/index.js',output:{file: 'dist/index.js'},// 使用 resolve 插件plugins: [commonjs(),resolve()] } - 運行
npx rollup -c命令進行打包，會發現，rollup 可以打包成功，并且在瀏覽器中也可以成功運行。
使用 Rollup 轉換 ES+ 語法的代碼：
-
新建 src/index.js文件，并編寫代碼。
const fn = () => {console.log('index') } fn() -
新建 rollup.config.js文件，并編寫配置信息。
module.exports = {input: './src/index.js',output:{file: 'dist/index.js'}, } -
運行
npx rollup -c命名進行打包，會發現，打包輸出的文件中并沒有對 ES6+ 語法進行轉換。
-
安裝
@rollup/plugin-babel插件對 ES6+ 代碼進行轉換：npm install @rollup/plugin-babel -D。 -
安裝 Bable 的核心：
npm install @babel/core -D。 -
安裝 Bable 中的預設：
npm install @babel/preset-env -D。 -
修改
rollup.config.js文件中的配置信息。// 引入 Babel 插件 const babel = require('@rollup/plugin-babel')module.exports = {input: './src/index.js',output:{file: 'dist/index.js'},plugins: [// 使用 Babel 插件babel({babelHelpers: 'bundled',}),] } -
新建
babel.config.js文件，并編寫 Babel 的配置信息。module.exports = {presets: ['@babel/preset-env',] } -
運行
npx rollup -c命名進行打包，會發現，打包輸出的文件中對 ES6+ 語法進行了轉換。
使用 Rollup 對打包后的 JavaScript 代碼進行壓縮：
-
新建 ·
src/index.js文件，并編寫代碼。const fn = (num1, num2) => {console.log(num1, num2)return num1 + num2 } const result = fn(10, 20) console.log(result) -
新建
rollup.config.js文件，并編寫配置信息。module.exports = {input: './src/index.js',output:{file: 'dist/index.js'}, } -
運行
npx rollup -c命名進行打包，會發現，打包輸出的文件中并沒有對 JavaScript 代碼進行壓縮。
-
安裝
@rollup/plugin-terser插件用來對打包后的 JavaScript 代碼進行壓縮 ：npm install @rollup/plugin-terser -D。 -
修改
rollup.config.js文件中的配置信息。// 引入 terser 插件 const terser = require('@rollup/plugin-terser')module.exports = {input: './src/index.js',output:{file: 'dist/index.js'},plugins: [// 使用 terser 插件terser()] } -
運行
npx rollup -c命名進行打包，會發現，打包輸出的文件中對 JavaScript 代碼進行了壓縮。
)
