使用rollup.js打包模組

by vivid 30. 五月 2018 11:47

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號:
N180519503
出刊日期: 2018/5/30

目前流行許多JavaScript模組打包器(JavaScript module bundler),例如「Webpack」、「FuseBox」、「Browserify」…等等,用於打包JavaScript程式碼。因現今大部分的瀏覽器並不支援ECMAScript模組匯入(import)、匯出(export)的語法,模組打包器便可將各模組程式整合到一個單一檔案中,有些模組打包器還提供「tree-shaking」功能,能夠分析你的程式碼,只打包必要程式,而不必打包沒有用到的程式碼。

本文要介紹的「rollup.js」本身就是一個模組打包器,可以將多個使用ECMAScript 2015撰寫的JavaScript程式碼,打包成一個單一的檔案,以便於建置出一個程式庫(Library)或應用程式(application)。

以下步驟將使用Visual Studio 2017來建立Node.js應用程式,並透過「rollup.js」來打包JavaScript程式。

 

建立Node.js專案

啟動Visual Studio 2017開發環境,從Visual Studio 2017開發工具「File」-「New」-「Project」項目,在「New Project」對話盒中,選取左方「Installed」清單 -「JavaScript」程式語言,從「Node.js」分類中,選取「Blank Node.js Console Application」。設定專案名稱,例如「RollupDemo」,然後設定專案存放路徑,並按下「OK」鍵,請參考下圖所示:

clip_image002

圖 1:使用Visual Studio 2017開發工具建立Node.js專案。

 

安裝Rollup套件

安裝「Rollup」方式有兩種,利用Visual Studio 2017圖型介面,或下CLI指令。若要使用Visual Studio 2017圖型介面安裝的話,可以從Visual Studio 2017開發工具 -「Solution Explorer」視窗 - 專案名稱下「npm」項目上方按滑鼠右鍵,從快捷選單選擇「Install New npm Packages」選項,開啟對話盒,請參考下圖所示:

clip_image004

圖 2:利用Visual Studio 2017圖型介面安裝「Rollup」套件。

在「Install New npm Packages」視窗左上方文字方塊中輸入「rollup」關鍵字做查詢,找到套件之後,只要點選右下方的「Install Packages」按鈕即可進行安裝,請參考下圖所示:

clip_image006

圖 3:在「Install New npm Packages」視窗搜尋與安裝套件。

若要使用CLI指令進行安裝,可以先利用Visual Studio 2017開發工具開啟命令提示字元,從Visual Studio 2017開發工具 -「Solution Explorer」視窗 - 專案名稱項目上方按滑鼠右鍵,從快捷選單選擇「Open Command Prompt Here」項目,開啟對話盒,請參考下圖所示:

clip_image008

圖 4:利用Visual Studio 2017開發工具開啟命令提示字元。

接著在命令提示字元,專案根目錄下,輸入以下指令進行安裝:

npm install --save-dev rollup

參考安裝畫面如下圖所示:

clip_image010

圖 5:安裝「rollup」套件。

撰寫JavaScript程式碼

回到Visual Studio 2017開發工具,在專案根目錄下建立「src」資料夾,從Visual Studio 2017開發工具 -「Solution Explorer」視窗 - 專案名稱項目上方按滑鼠右鍵,從快捷選單選擇「Add」-「New Folder」項目,將資料夾命名為「src」。

在「src」資料夾中加入「hello.js」檔案。從Visual Studio 2017開發工具 -「Solution Explorer」視窗 - 專案名稱下「src」項目上方按滑鼠右鍵,從快捷選單選擇「Add」-「New Item」項目,開啟「Add New Item」對話盒,選取「Node.js」分類下的「JavaScript file」項目,然後在下方將「Name」設定為「hello.js」,最後按下「Add」按鈕,請參考下圖所示:

clip_image012

圖 6:在「src」資料夾中加入「hello.js」檔案。

在「hello.js」檔案加入以下程式碼,匯出「sayHello」 與「sayHi」兩個函式,兩個函式分別印出訊息到主控台:

// src/hello.js
export function sayHello() {
    console.log('Hello');
}

export function sayHi() {
    console.log('Hi');
}

 

重複上面的步驟,在「src」資料夾中加入「main.js」檔案,在檔案中加入以下程式碼,匯入「hello.js」檔案中的「sayHello」方法,然後匯出「main」函式:

// src/main.js
import { sayHello } from './hello.js';

export default function () {
    sayHello();
}


切換到命令提示字元,在專案根目錄,輸入以下指令,利用「Rollup」打包程式碼:

node_modules\.bin\rollup src/main.js -f cjs

「-f」參數指定要打包的格式,等同於以下指令:

node_modules\.bin\rollup src/main.js --format cjs

在這個例子中使用「CommonJS」以便給Node.Js使用,打包完的結果會輸出在「stdout」,請參考下圖所示,因為「main.js」檔案只有使用到「hello.js」檔案中的「sayHello」函式,沒有使用到「sayHi」函式,因此「Rollup」沒有打包「sayHi」函式,這便是所謂的「tree-shaking」功能:

clip_image014

圖 7:將打包結果輸出到「stdout」。

打包的格式,除了上述的「cjs」之外,還可以指定為「amd」、「cjs」、「system」、「es」、「iife」以及「umd」等等幾種。

 

打包結果輸出到檔案

若要將打包的結果輸出成檔案,以便於在其它專案或網站使用,可以切換到命令提示字元,在專案根目錄,輸入以下指令,利用「-o」參數設定要輸出的檔案名稱:

node_modules\.bin\rollup src/main.js -f cjs -o bundle.js

以上等同於以下指令:

node_modules\.bin\rollup src/main.js --format cjs --output bundle.js

打包完的執行結果,請參考下圖所示:

clip_image016

圖 8:將打包結果輸出到檔案。

檢視專案根目錄,將會看到一個「bundle.js」檔案。如果使用Visual Studio 2017開發工具,可以點選「Solution Explorer」視窗,「Show All Files」按鈕,找到隱藏的「bundle.js」檔案,請參考下圖所示:

clip_image018

圖 9:檢視隱藏的「bundle.js」檔案。

「bundle.js」檔案的內容表列如下:

'use strict';

// src/hello.js
function sayHello() {
    console.log( 'Hello' );
}

// src/main.js

function main () {
    sayHello();
}

module.exports = main;


使用互動式視窗測試程式碼

Visual Studio 2017開發工具內建一個互動式視窗,可以讓我們使用來測試Node.js程式碼。選取Visual Studio 2017開發工具「Solution Explorer」視窗 -「你的專案」資料夾上方,按滑鼠右鍵,從快捷選單選擇「Open Node.js Interactive Window」項目,開啟對話盒,請參考下圖所示:

clip_image020

圖 10:開啟「Node.js Interactive Window」視窗。

在「Node.js Interactive Window」視窗輸入以下程式碼:

var lib = require('./bundle');

lib();

執行結果參考如下圖所示:

clip_image022

圖 11:在「Node.js Interactive Window」視窗測試程式。

在Node.JS程式測試

因為Visual Studio 2017建立的「Node.js Console Application」專案預設包含一個「app.js」檔案,並在專案的屬性視窗中,將程式的進入點設定為「app.js」檔案,請參考下圖所示:

clip_image024

圖 12:專案屬性。

我們可以直接在「app.js」檔案中直接加入程式,參考如下:

'use strict';

var lib = require('./bundle');

lib();

完成後在Visual Studio 2017開發工具,按「F5」執行專案,Visual Studio 2017就會將結果輸出在命令提示字元,請參考下圖所示:

clip_image026

圖 13:在Visual Studio 2017開發工具測試程式。

使用組態檔案

當打包時所需設定的參數愈來愈多時,我們可以利用組態檔案來簡化參數的設定。「Rollup」的組態檔案本身就是一個JavaScript檔案,比起CLI指令提供更大的彈性。你可以在專案根目錄加入一個「rollup.config.js」檔案,然後加入以下程式碼:

// rollup.config.js
export default {
    entry: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'
    }
}

 

「entry」設定打包的來源檔案;「output.file」設定要輸出的檔案名稱,「output. format」則設定檔案格式,接著切換到命令提示字元,在專案根目錄,輸入以下指令:

node_modules\.bin\rollup –c

「-c」參數表示使用組態檔的意思,等同於以下指令:

node_modules\.bin\rollup –-config

此範例執行結果參考如下圖所示:

clip_image028

圖 14:使用組態檔案。

這次「rollup」提示選項的名稱有異動,這是因為「entry」是舊語法,新語法要改為「input」的關係:

(!) Some options have been renamed

https://gist.github.com/Rich-Harris/d472c50732dab03efeb37472b08a3f32

entry is now input

讓我們修改組態設定如下:

 

// rollup.config.js
export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'
    }
}

 

再切換到命令提示字元,在專案根目錄,輸入以下指令重新打包,如此就不會有提示訊息:

clip_image030

圖 15:使用組態檔案。

Rollup搭配Babel

「Rollup」可以搭配許多「plugin」使用以便於在打包的過程中,利用「plugin」客製化「Rollup」打包的行為,可以使用的「plugin」可參閱:「https://github.com/rollup/rollup/wiki/Plugins」。

有許多的專案會使用「Bable」轉譯JavaScript程式碼,這是因為現今的許多環境,例如某些舊版瀏覽器並不支援ECMAScript 2015新語法,「Babel」轉譯程式可以將ECMAScript 2015程式轉換成ECMAScript 5相容語法。只要安裝「rollup-plugin-babel」套件,就可以在「Rollup」打包程式的過程中,叫用「Babel」來轉譯程式碼。

讓我們先修改「Hello.js」程式碼,改寫「sayHello」函式,利用ECMAScript 2015新語法,透過「`」符號定義字串樣版,然後在字串中插入目前系統時間:

// src/hello.js
export function sayHello() {
    let t = new Date();
    console.log(`Hello ,${t}`);
}

export function sayHi() {
    console.log('Hi');
}


切換到命令提示字元,在專案根目錄,輸入以下指令,安裝「Babel」,本文使用「babel-core@6」版本:

npm install --save-dev babel-core@6

這個指令的執行結果參考如下:

clip_image032

圖 16:安裝「babel-core@6」。

Babel preset是許多Babel Plugins的集合,用於轉譯程式碼,接著安裝「babel-preset-es2015」套件,切換到命令提示字元,在專案根目錄,輸入以下指令:

npm install --save-dev babel-preset-es2015

這個指令的執行結果參考如下:

clip_image034

圖 17:安裝「babel-preset-es2015」套件。

接著安裝「rollup-plugin-babel」套件,切換到命令提示字元,在專案根目錄,輸入以下指令:

npm install --save-dev rollup-plugin-babel

這個指令的執行結果參考如下:

clip_image036

圖 18:裝「rollup-plugin-babel」套件。

修改「rollup.config.js」檔案,加入「plugins」項目:

// rollup.config.js
import babel from 'rollup-plugin-babel';
export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'
    },
    plugins: [
        babel(),
    ],
}

 

在使用到Babel之前,我們需要先進行組態。先在專案根目錄下加入「.babelrc」檔案。在Visual Studio 2017專案 - 「Solution Explorer」視窗,專案名稱下「src」項目上方按滑鼠右鍵,從快捷選單選擇「Add」-「New Item」,開啟「Add New Item」對話盒,選取「Node.js」分類下的「JavaScript file」項目,然後在下方將「Name」設定為「.babelrc」,最後按下「Add」按鈕。然後在檔案中加入以下程式碼:

{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ]
  ]
}

 

切換到命令提示字元,在專案根目錄,輸入以下指令,打包程式碼:

node_modules\.bin\rollup –c

這個指令的執行結果參考如下:

clip_image037

圖 19:打包程式碼。

產生出的「bundle.js」檔案內容如下,「sayHello」函式中改用「+」號來串接出要輸出的字串:

'use strict';

// src/hello.js
function sayHello() {
    var t = new Date();
    console.log( 'Hello ,' + t );
}

// src/main.js

function main () {
    sayHello();
}

module.exports = main;


 

 

完成後在Visual Studio開發工具,按「F5」執行專案,Visual Studio就會將結果輸出在命令提示字元,請參考下圖所示:

clip_image039

圖 20:測試程式執行。

Tags:

.NET Magazine國際中文電子雜誌 | Visual Studio | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List