Sencha Cmd 5升級指南

本指南旨在幫助開發人員使用Sencha Cmd從ExtJS 4.1.1 a+升級到ExtJS 5.0.x。
儘管在這個版本中有一些重要的變化，但是我們已經嘗試使升級過程儘可能的沒有痛苦。
在深入討論之前，值得一提的是，使用此指南需要一些前提。

• 您的應用程式是使用Ext JS 4.1.1 a+構建的
• 您的應用程式是使用我們推薦的MVC模式佈局的
• 你的應用目前正在與Sencha Cmd一起構建
  我們認識到，並不是所有的客戶都有能力執行最新版本的Ext JS和Sencha Cmd。
  時間限制、最後期限和支援許可通常決定了在企業中使用Ext JS的版本。

花時間升級到Ext JS 4.x和Cmd 4.x的最新版本將會使升級到我們的5.x分支更為順暢。
使用最新的版本可以確保您可以使用修復過bug的版本並避免大量的API更改。

遷移過程

在開始之前

清除狀態

遷移過程的第一步是確保在您的原始碼控制系統中沒有未提交的更改。
不建議在未提交更改時啟動升級。
這將讓你更容易地回顧Sencha Cmd的變化，這樣你就可以確定你所做的任何更改未受影響。
安裝合併工具(推薦)
在升級過程中，Sencha Cmd可能需要對一些您可能已經編輯過的檔案進行更改。
就像任何這樣的場景一樣，Sencha Cmd需要更新和您可能已經編輯了的程式碼相同，由此產生了合併衝突。好訊息是，就像版本控制一樣，有一些工具可以幫助解決這些合併衝突。
Sencha Cmd可以使用任何可以從命令列執行的可視化合並工具(這幾乎是所有的)。
這一步是可選的，但高度推薦，因為它將使處理升級變得更加簡單。

下面是一些流行的選擇(一些免費的，一些商業的):

• p4merge
• SourceGear
• kdiff3
• Syntevo SmartSynchronize 3
• TortoiseMerge - (part of TortoiseSVN)
• AraxisMerge
  在下一步中，我們將配置Sencha Cmd使用您的首選合併工具。

升級Sencha Cmd

接下來，您需要獲取Sencha Cmd 5的最新版本。

你可以下載Sencha Cmd 5或者檢視下面連結中的已知問題的發行說明:

Release Notes

如果你已經在使用Sencha Cmd 5，你可以從我們的下載頁面獲得最新的測試版或者執行如下命令:

sencha upgrade --beta

安裝Sencha Cmd並重新啟動您的終端。

注意:如果你安裝了以前的Cmd，它不會取代它，但是在執行Cmd軟體時它會優先執行現行版本。
有關詳細資訊,請參閱上面。

配置合併工具

如果你選擇了一個合併工具，我們需要配置Sencha Cmd來使用這個合併工具。
要這樣做，您需要向配置檔案中新增兩個屬性:

cmd.merge.tool

cmd.merge.tool.args

另外，這兩個屬性可以以獨立於版本的方式設定，這樣您的配置引數將適用於Sencha Cmd的所有版本。
詳情請見“sencha.cfg” 檔案的尾部。

App Upgrade

我們已經準備好開始升級了。
只需在應用程式的根資料夾中執行該命令，就可以完成升級操作:

sencha app upgrade -ext

您應該會看到少量的綠色文字，讓您知道您的應用程式已經成功地升級了。

在大多數情況下，您將需要在應用程式的基礎上執行構建，然後應用才能像預期的那樣執行。
可以通過執行以下命令來完成:

sencha app build

Microloader（微載入器）

在Sencha Cmd之前的發行版中，Ext JS應用程式與Sencha Touch應用程式的執行非常不同。
這主要是由於Sencha Touch“微載入器”造成的。
在Sencha Cmd 4中，microloader從Sencha Touch移動到Sencha Cmd，但是在那個時候，
微載入器不能在所有Ext JS支援的瀏覽器上執行。

使用Sencha Cmd 5和Ext JS 5，這種限制不再會有。
這意味著Ext JS 5應用程式現在可以使用與Sencha Touch相同的處理過程。
這為一些非常有用的特性打開了大門。

app.json

為了利用這些特性，我們首先需要將標記頁面從“x-compile”註釋表單轉換為微載入器指令碼標記並關聯“app.json”檔案。
在大多數情況下，這將是一個簡單的問題，將指令碼和CSS引用移到您的“app.json”檔案中即可。
以前版本的Sencha Cmd生成的預設標記如下:

<!-- <x-compile> -->
     <!-- <x-bootstrap> -->
         <link rel="stylesheet" href="bootstrap.css">
         <script src="../ext/ext-dev.js"></script>
         <script src="bootstrap.js"></script>
     <!-- </x-bootstrap> -->
     <script src="app.js"></script>
<!-- </x-compile> -->

上面的標記應該更改為:

<script id="microloader" type="text/javascript" src="bootstrap.js"></script>

“bootstrap.js”檔案是由Sencha Cmd生成的，用於載入微載入器。這個檔案只在開發模式中使用。
上面的指令碼標記被替換為構建的一部分，就像前面所替換的“x-compile”塊。

等同的“app.json”配置是這樣的:

{
    "framework": "ext",
    "css": [
        {
            "path": "bootstrap.css",
            "bootstrap": true
        }
    ],
    "js": [
        {
            "path": "app.js",
            "bundle": true
        }
    ]
}

您可能會注意到，在“ext-dev”檔案中沒有js入口。
這是因為框架包(“ext”)是Sencha Cmd 5內部識別的東西，它會自動地在您的工作空間中找到它。

您可以在“app.json”檔案中探索到許多其他選項。
這個檔案使您可以輕鬆地訪問包(使用“requires”)，並且允許您將選項傳遞到執行時。
這是因為您在“app.json”檔案中的配置內容，在執行時中將被載入為Ext.manifest。
譯者注：在執行環境裡，您可以通過Ext.Manifest來訪問app.json中配置的內容。例如：您可以為測試環境和生產環境
配置不同的API域名。

構建屬性

在以前的Sencha Cmd的版本中，必須在 “.sencha /app”中的多個檔案裡指定許多屬性。
在Sencha Cmd 5中，可以在許多情況下使用app.json來代替。
通過新增app.並將屬性名與“.”連線在一起，可以將app.json的內容轉換到構建屬性中。
例如，在app.json中的這兩個屬性:

 {
     "theme": "ext-theme-crisp",
     "sass": {
         "namespace": "MyApp"
     }
 }

在“……sencha/app/sencha.cfg”中替換這些屬性：

 app.theme=ext-theme-crisp
 app.sass.namespace=MyApp

還有許多其他的構建屬性不能在app.json中指定(通常是因為它們不是以app.作為字首)，
但是建議您只保留那些在“app.json”中可以控制的屬性。
有關您可以在app.json中控制的內容的詳細資訊，請參考該檔案的註釋。
對於其他屬性,參看“.sencha /app/defaults.properties”檔案。

監視

最後一步是在你的應用程式根資料夾中構建應用：sencha app build，或者監視應用：sencha app watch。
這兩種方法都將更新您的應用程式並準備使用。
使用watch，您現在可以在自己本地主機上的web伺服器的或在http://localhost:1841上檢視應用程式，
這是我們自動為您定製的伺服器。這個web伺服器是app watch預設的伺服器。
在以前的版本中，您必須分別執行sencha web start來使用Sencha Cmd web伺服器。
您可以使用這些屬性調整web伺服器配置(顯示它們的預設值):

build.web.port=1841
build.web.root=${workspace.dir}

在這個版本中，我們優化watch功能，使它有了更快的啟動時間，
更好地與Compass共享工作，同時避免了不必要的Sass編譯。

Cordova / PhoneGap

如果你正在使用Sencha Cmd對Cordova或PhoneGap的進行整合，那麼升級過程將包括一些額外的步驟。

構建配置檔案

Sencha Cmd 5增加了在您的app.json檔案中定義多個構建的支援。
這種支援對於原生打包來說是比較理想的。
對於Cordova或PhoneGap支援的應用程式，“sencha app upgrade”命令將在你的app.json檔案的頂部
新增一些預設的構建配置檔案。
這些構建配置檔案提供了來自Sencha Cmd以前版本的一致的命令介面，並展示了你想實現的更多功能。

app upgrade命令為Cordova應用程式新增的構建檔案看起來是這樣的:

"builds": {
    "web": {
        "default": true
    },

    "native": {
        "packager": "cordova",
        "cordova" : {
            "config": {
                "platforms": "ios",
                ...
            }
        }
    }
},

這些構建配置檔案確保所有的“sencha app build”命令的變化都與以前的版本相同。
但是，您會注意到，“native”現在是一個構建配置檔案，而不是一個環境(比如“測試”或“生產”)。
這意味著你現在可以執行“sencha app build native testing”，這在以前是不可能的。

本地屬性檔案

Sencha Cmd所產生的新專案不再使用“cordova.local.properties”或“phonegap.local.properties”。
如果您的應用程式還有這些檔案，它們也會繼續正常執行。
新的專案應該向標準的“local.properties”檔案添加個人屬性(例如PhoneGap構建憑證)。

總結

就這樣!您的應用程序升級到最新的Ext JS和Sencha Cmd。
在測試完之後，您可以提交更改(其中很多都在“.sencha”資料夾)。

其他注意事項

日誌輸出

如果你對Sencha Cmd很熟悉，你可能會注意到，Sencha Cmd的控制檯輸出已經顯著減少了。
如果您更喜歡原始的日誌記錄級別，您可以通過向您的命令新增-info來重新啟用它。
例如:

sencha -info app watch

如果你想要更少的日誌輸出，你可以用-quiet引數來執行命令:

sencha -quiet app watch

更多的資訊

有關升級過程的更多資訊，請檢視以下指南:

• Charts - Upgrade Guide
• Ext JS 5 - Upgrade Guide