但是,這個精簡大檔案適用於正式環境,開發時還是用「適合閱讀」的檔案比較好。
ClosureBuilder 只能用來精簡 Google Closure 產生的檔案。
依照官方範例建立程式 start.js。
goog.provide('myproject.start'); goog.require('goog.dom'); myproject.start = function() { var newDiv = goog.dom.createDom('h1', {'style': 'background-color:#EEE'}, 'Hello world!'); goog.dom.appendChild(document.body, newDiv); }; // Ensures the symbol will be visible after compiler renaming. goog.exportSymbol('myproject.start', myproject.start);myproject.html
<!doctype html> <html> <head> <script type="text/javascript" src="../closure/goog/base.js"></script> <script src="start.js"></script> </head> <body> <script> myproject.start(); </script> </body> </html>接下來就是這篇筆記存在的原因,官方文件有些小錯誤。
在 Windows 環境執行 Python 程式:
python closure/bin/build/closurebuilder.py --root=closure --root=third_party --root=myproject --namespace=myproject.start執行以上 指令 可以在 Console 看到這個範例所需的 Javascript 檔案清單,也就是瀏覽器需要下載的 js 檔案。
--root 需要指向所有需要的 js 目錄,包括 Google Closure 需要的 closure 與 third_party 兩個目錄,與 myproject 目錄。
--namespace 則是指定「程式入口」,ClosureBuilder 才知道從哪裡開始,官方文件錯在加了雙引號。
要執行以下指令前,得先去下載 Closure Compiler。
python closure/bin/build/closurebuilder.py --root=closure --root=third_party --root=myproject --namespace=myproject.start --output_mode=compiled --compiler_jar=compiler.jar --output_file=myproject/start-compiled.js執行以上 指令 可以產出最佳化的 Javascript 檔案,接下來只要修改 myproject.html 裡的 script src 到 start-compiled.js,並移除 base.js 的 script tag(因為已經包到 start-compiled.js 裡了),這樣,只要一隻 html 和一隻 js 檔就可以了,官方文件錯在 --output_file 多了一個 s。
LimeJS 作為 Google Closure 的擴充,將這流程簡化了! ---
沒有留言:
張貼留言