建立一個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