[[441993]]

寫在前面

Rollup是一款ES Modules打包器，它也可以將項目中散落的細小模塊打包成整塊代碼，從而使得這些劃分的模塊可以更好地運行在瀏覽器或node.js環境。Rollup與webpack的作用非常類似，但是小巧的多，誕生的初衷就是希望能夠提供一個高效地ES Modules打包器，充分利用ES Modules的各項特性。

Rollup的使用

Rollup 對代碼模塊使用新的標準化格式，這些標準都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解決方案，如 CommonJS 和 AMD。ES6 模塊可以使你自由、無縫地使用你最喜愛的 library 中那些最有用獨立函數，而你的項目不必攜帶其他未使用的代碼。ES6 模塊最終還是要由瀏覽器原生實現，但當前 Rollup 可以使你提前體驗。

首先當然是需要執行安裝命令進行安裝rollup，接著就和webpack一樣需要配置相關的config文件。我們可以配置不同的配置文件直接用cli進行打包，但是如果添加更多地選項，這種命令行的方式就變得很麻煩。為此我們需要創建配置文件來囊括所需的選項，配置文件以rollup.config.js形式命名，比cli更加靈活。

$ npm i rollup -D 

我們看到其實rollup配置和webpack大同小異，想要更詳細的配置項信息可以異步rollup官網。

//src/helloWorld.js 
export default function sayHello(){ 
  console.log("nihao"); 
} 
 
//src/index.js 
import sayHello from "./helloWorld" 
sayHello() 
 
//rollup.config.js 
export default { 
  input:"src/index.js",//打包入口 
  output:{//文件輸出配置 
    file:"dist/bundle.cjs.js",//打包后生成的文件位置和文件名 
    format:"cjs",//文件的輸出格式，遵循cjs規范，這也是官方模塊化規范 
    name:"bundleName"//包的全局變量名 
  } 
} 

我們在package.json文件中配置的打包命令是"build":"rollup -c"，我們在執行打包命令npm run build后，看到生成的文件dist/bundle.cjs.js中的代碼是非常簡潔清爽的，可讀性非常強。

//dist/bundle.cjs.js 
'use strict'; 
 
function sayHello(){ 
  console.log("nihao"); 
} 
 
sayHello(); 

接下來，我們就詳細談談rollup的相關配置問題，我們知道rollup默認采用的是ESM規范，但是如果你想使用CommonJS規范，你可以使用.cjs后綴進行區分：

//rollup.config.cjs 
module.export = { 
  input:"src/index.js", 
  output:{ 
    file:"dist/bundle.cjs.js", 
    format:"cjs" 
  } 
} 

前面我們已經創建了一個簡單的打包配置文件，但是當你需要創建更加復雜的bundles時，你將需要更大的彈性，比如：通過npm安裝導入模塊、通過babel編譯代碼，使用json配置文件等等。對此，我們可以使用plugins插件，通過在捆綁過程的關鍵點來改變rollup的行為。比如，我們可以使用@rollup/plugin-json插件來允許導入JSON文件，使用命令行npm install --save-dev @rollup/plugin-json安裝。

// src/main.js 
import {version} from "../package.json"; 
 
export default function(){ 
  console.log('version ' + version); 
} 
 
// rollup.config.js 
import json from '@rollup/plugin-json'; 
 
export default { 
  input: 'src/main.js', 
  output: { 
    file: 'bundle.js', 
    format: 'cjs' 
  }, 
  plugins: [json()] 
}; 

這樣，執行npm run build命令進行打包，生成的文件是：

'use strict'; 
 
var version = '1.0.0'; 
 
function main() { 
  console.log('version ' + version); 
} 
 
module.exports = main; 

當然，一些特殊的插件依賴于一些輸出，有關特定于輸出的插件可以做什么的技術細節，請參閱插件鉤子。如果一個不兼容的插件被用作特定于輸出的插件，那么 Rollup 會發出警告。

為了實踐那些依賴于輸出的插件，我們基于前面簡單的項目打包進行相關的配置，先執行命令行npm install --save-dev rollup-plugin-terser，

// rollup.config.js 
import json from '@rollup/plugin-json'; 
import { terser } from 'rollup-plugin-terser'; 
 
export default { 
  input: 'src/main.js', 
  output: [ 
    { 
      file: 'bundle.js', 
      format: 'cjs' 
    }, 
    { 
      file: 'bundle.min.js', 
      format: 'iife', 
      name: 'version', 
      plugins: [terser()] 
    } 
  ], 
  plugins: [json()] 
}; 

此時打包得到：

var version = (function () { 
  'use strict'; 
  var n = '1.0.0'; 
  return function () { 
    console.log('version ' + n); 
  }; 
})(); 

前面我們看到可以將多個文件的代碼打包成一個文件，那么當項目比較大的時候就需要對代碼進行分割。對于代碼分割，有時候 Rollup 會自動將代碼分割成塊，比如動態加載或多個入口點，還有一種方法可以通過 output.manualChunks 選項顯式告訴 Rollup 哪些模塊要分割成單獨的塊。

// src/main.js 
export default function () { 
  import('./foo.js').then(({ default: foo }) => console.log(foo)); 
} 

Rollup將會使用動態導入去創建一個分割的chunk文件，只在需要的時候進行加載。為了rollup能夠知道哪里是第二個chunk塊，可以通過設置--file設定規范，通過--dir創建導出目錄。

$ rollup src/main.js -f cjs -d dist 

接下來將會創建一個包含兩個文件main.js和chunk-[hash].js的目錄dist，此處的[hash]是一個hash字符串。你可以設置你自己想要的文件命令模式，通過 output.chunkFileNames和output.entryFileNames 進行配置。

//→ main.js: 
'use strict'; 
 
function main() { 
  Promise.resolve(require('./chunk-b8774ea3.js')).then(({ default: foo }) => console.log(foo)); 
} 
 
module.exports = main; 
 
//→ chunk-b8774ea3.js: 
('use strict'); 
 
var foo = 'hello world!'; 
 
exports.default = foo; 

Rollup的優勢是：

• 輸出結果更加扁平，執行效率更高
• 自動移除未引用代碼
• 打包結果依然完全可讀

Rollup的缺點是：

• 加載非ESM的第三方模塊比較復雜
• 因為模塊最終會都被打包到全局中，所以無法實現HMR
• 瀏覽器環境中，代碼拆分功能必須使用Require.js這樣的AMD庫

寫在最后

對于Webpack大而全，Rollup小而美，我的選擇基本原則是應用開發優先webpack，類庫或框架開發使用Rollup。這是因為在開發js庫時，webpack的繁瑣和打包后的文件體積太大，而rollup就是針對js庫和框架開發的，它只是生成代碼將我們的代碼轉為目標js。如果你想了解更多關于rollup的相關知識，可以閱讀(官方文檔)。