建立一個javascript的library在window平台

建立一個javascript的library在window平台

前言

  由於對javascript不熟，買到的書也都剛好沒再講怎麼建library，在此把過程記錄下來。建置完後的library會有2個，一個是正常的版本，另一個版本是最小化的版本，兩個本本的差異在正常版本會保留空白換行等字元，最小化的則不會，但最小化後的檔案會比較小。

步驟1:安裝node.js

  到node.js官網下載安裝檔後安裝即可。安裝完後請在console鍵入。

npm help

確認npm是否能正常運作。
如果node.js已安裝過，這個步驟可略過。

步驟2:建立library的資料夾

  建立一個資料夾並為它命名(在本範例中，library的資料夾命名為"JSLibSample")，這個資料夾將會是專案的根目錄。

步驟3:安裝rollup.js

  在console鍵入下列命令

npm install --global rollup

安裝完後，鍵入下列命令確認是否安裝完成。

rollup -h

如果rollup.js已安裝過，這個步驟可以略過。

步驟4:建立package.json

  在console到專案的根目錄，鍵入下列命令

npm init

輸入完命令後，會需要輸入"package name"、"version"...等訊息，直接用enter略過，這些數值之後都可以改，不用擔心。執行完會看到下圖

npm init執行後的結果

在認專案的根目錄下會產生一個名為"package.json"的檔案。

步驟5:建立rollup.config.js

在專案的根目錄下，建立一個名為rollup.config.js的檔案，並在內容填下

export default {
  entry: 'src/scripts/main.js',
  format: 'umd',
  targets: [
 {
  format: 'umd',
  moduleName: 'JSLIBSAMPLE',
  dest: 'build/js/main.js'
 }
  ]
};

其中entry這個變數代表library的來源檔案，dest這個變數代表要輸出的library，modulename則是library的名稱，這裡可以根據需要來變更。

步驟6:建立一個簡單的library

  在根目錄下建立來源檔案(本範例是"src/scripts/main.js")，如下圖

建立來源檔案

並在該檔案填入以下內容

function TestCall(){
 console.log("TestCall()");
}
export{ TestCall };

在根目錄下建立輸出資料夾(本範例為build/js/)，如下圖

建立輸出資料夾

建立完輸入與輸出後，在console並到專案的根目錄下，鍵入以下命令

rollup -c

執行完後可以在輸出的資料夾下看到輸出檔案。如下圖

輸出的library

步驟7:測試輸出的library

  在專案的根目錄下，建立一個名為"test"的資料夾，並在該資料夾建立一個名為"test.html"的檔案，然後填入以下內容在該檔案

<script src="../build/js/jsLibSample.js"></script>
<script>
JSLIBSAMPLE.TestCall();
</script>

完成後如下圖

測試用網頁的建立

接著用瀏覽器開啟"test.html"，並確認console.log()是否有正確輸出"TestCall()"，如下圖

測試library

步驟8:安裝uglify-js

  在console鍵入下列命令

npm install --global uglify-js

安裝完後，鍵入下列命令確認是否安裝完成。

uglifyjs -h

如果uglify-js已安裝過，這個步驟可以略過。

步驟9:設定建置命令

  在專案的根目錄中，將"package.json"檔案的內容改成以下內容

{
  "name": "jslibsample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup -c",
    "build-uglify": "rollup -c && uglifyjs build/js/jsLibSample.js -cm > build/js/jsLibSample.min.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

紅字的部分為新增的部分，左側的"build"與"build-uglify"是建置的命令名稱，可以自行命名，右側為實際執行的命令。build-uglify的執行命令，-cm前方為library的輸出檔案，右方則設置要輸出的最小化後的檔案。接著在console並到專案的根目錄下，執行建置最小化的檔案，鍵入以下命令

npm run build-uglify

接著確定最小化後的檔案是否確實被建置。如下圖

執行建置最小化後的結果

步驟10:測試最小化檔案

  在專案的根目錄的test資料夾裡，建立一個名為"testmin.html"的檔案，檔案的內容如下

<script src="../build/js/jsLibSample.min.js"></script>
<script>
JSLIBSAMPLE.TestCall();
</script>

接著用瀏覽器開啟"testmin.html"，並確認console.log()是否有正確輸出"TestCall()"。

參考資料:

Rollup.js Tutorial, Part 1: How to Set Up Smaller, More Efficient JavaScript Bundling Using Rollup
rollup.js