但是,這個精簡大檔案適用於正式環境,開發時還是用「適合閱讀」的檔案比較好。
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 的擴充,將這流程簡化了! ---
沒有留言:
張貼留言