Extjs4 專案的部署

bill1315發表於2012-11-02
JS

最新引進的 Sencha SDK Tools可以使 Ext JS 4 程式開發較以前更加容易. Tools允許你在一個JSB3 (JSBuilder檔案格式)表格中生成JS依賴關係列表,和建立一個僅包含你程式執行所需的自定義的合成檔案.

在安裝 SDK Tools之後, 開啟 window命令視窗（cmd），進入你程式所在的目錄,如下.

cd path/to/web/root/helloext

From here you only need to run a couple of simple commands. The first one generates a JSB3 file:

sencha create jsb -a index.html -p app.jsb3

無論你的伺服器語言使用的是 PHP, Ruby, ASP還是其他., 你可以直接用你程式的實際URL替換index.html:

sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3

它會掃描你的index.html 裡使用的檔案,然後生成一個叫 app.jsb3的 JSB 檔案. 生成JSB3可以給我們在編譯之前確認修改的機會 - 如果你有自定義的檔案要拷貝，這將會很有用,。但是大多數情況下，我們會使用下面的指令直接編譯:

sencha build -p app.jsb3 -d .

這會建立兩個基本的 JSB3 檔案:

  1. all-classes.js - 此檔案包含程式所有的類.它沒有被壓縮，目的是方便你開發除錯. 我們的示例裡此檔案是空的，因為示例裡並沒有包含任何類.

  2. app-all.js - 壓縮版的 all-classes.js + app.js.

一個Ext JS應用程式將需要一個單獨的index.html用於生產版本的應用程式. 你通常會在構建或伺服器端邏輯中處理這個, 現在我們在helloext目錄下建立一個新的檔案 index-prod.html:

<html>
　　<head>
　　　　<title>Hello Ext</title>
　　　　<linkrel="stylesheet"type="text/css"href="extjs/resources/css/ext-all.css">
　　　　<script type="text/javascript"src="extjs/ext.js">
　　　　</script><scripttype="text/javascript"src="app-all.js"></script>
　　</head>
　　<body></body>
</html>

請注意， ext-debug.js 被替換成 ext.js,app.js 被替換成 app-all.js. 如果你在瀏覽器開啟http://localhost/helloext/index-prod.html, 你會看到"Hello Ext"程式的 production version.

 

附：

解壓下載的 Ext JS 4 SDK包,你會看到如下檔案:

  1. ext-debug.js - 此檔案僅用於開發. 它提供了保證Ext框架執行的最小化的 Ext JS核心類. 額外的類會按2.2節的方法動態載入.

  2. ext.js - 壓縮板的ext-debug.js.

  3. ext-all-debug.js - 此檔案包含整個Ext JS庫. 此檔案對縮短你的學習曲線很有幫助,雖然在實際的專案開發中適合首先考慮ext-debug.js.

  4. ext-all.js - 壓縮版的 ext-all-debug.js.雖然它可以直接引用, 但是我們並不推薦這種做法,因為在實際開發中,我們並不會用到所有的類. 合適的做法是為程式建立一個自定義的build檔案,方法將會在第3章節敘述.

 

相關文章