Day 20 使用 Rollup 來產生各平台的 Javascript 檔案

為了要讓我們撰寫的 SDK 可以在各平台使用，我們需要透過一些工具來幫我們把 TypeScript 編譯成各平台可以使用的 Javascript 檔案。

雖然 TypeScript 也可以直接編譯成 Javascript，但是筆者在這個專案選擇使用 Rollup 加上 TypeScript 外掛來幫忙處理，因為 TypeScript 會需要設定多個設定檔並且編譯多次來產生不同平台的檔案，而使用 Rollup 可以直接用一個設定檔來產生。

另外使用 Rollup 還可以帶來一些額外的好處，例如：移除沒有使用到的程式碼、將多個檔案合併成一個檔案等等。

撰寫 Rollup 設定檔

建議讀者可以搭配原始碼一起閱讀，原始碼網址為 https://github.com/taichunmin/chameleon-ultra.js/blob/master/rollup.config.mjs

在這個專案內筆者預計產生四種不同格式的 Javascript 檔案，分別為 ESM、CommonJS、IIFE 及 IIFE (Minified)。

共通設定

這些不同格式的 Javascript 有一些供通的設定值：

首先是 input，代表輸入的檔案。

接下來我們看到 external 的部分，這個參數是用來告訴 Rollup 把某些函式庫視為外部函式庫，而不要把它們打包在產生的 Javascript 檔案內，這樣可以讓產生的 Javascript 檔案更小。

接下來我們看到 plugins 的部分：

• typescript：由於 Rollup 原生只支援 ESM 的 JS 程式碼，但我們的原始碼使用 TypeScript 撰寫，所以需要透過這個外掛幫我們把 .ts 轉成 ESM 的 JS 程式碼。
• node-resolve：這個外掛可以讓 Rollup 支援 node_modules 內的函式庫。
• commonjs：這個外掛可以讓 Rollup 支援 CommonJS 的 JS 程式碼。
• version-injector：這個外掛可以在產生 JS 檔案時幫我們把 package.json 內的版本號複製到程式碼的指定位置中。

不同格式的專有設定

ESM 及 CommonJS 幾乎不需要什麼額外的設定，Rollup 可以直接產生這兩種格式的檔案，只需要提供輸出路徑即可。

至於 IIFE 及 IIFE (Minified) 則需要指定一些額外的設定。

首先是 global 參數，如果某些函式庫你不想打包在產生的 JS 檔案內，你可以選擇獨立使用 script 標籤載入，然後透過 global 參數來指定這些函式庫的名稱，這樣 Rollup 就會把這些函式庫當成是全域變數，而不會把它們打包在產生的 JS 檔案內。

再來是 name 參數，這個參數會影響到這個 JS 會被放在全域變數的哪個屬性下，例如：name: 'ChameleonUltraJS' 會讓這個 JS 檔案被放在 window.ChameleonUltraJS 下。

最後 IIFE (Minified) 有額外指定一個 terser 外掛，這個外掛可以幫我們壓縮 JS 檔案。