004-Sencha Cmd 6升級指南
Sencha Cmd 6升級指南
本指南旨在幫助開發人員使用Sencha Cmd從Ext JS 5.x或Sencha Touch 2.4.x遷移到Ext JS 6.0.x。儘管在這個版本中有一些重要的變化，但是我們已經盡力使升級過程儘可能的平滑。
在深入討論之前，需要提醒的是，這個指南是在如下前提下的。
l 您的應用程式是使用Ext JS 5.x或Sencha Touch 2.4.x構建的
l 您的應用程式是使用我們推薦的MVC模式佈局的
l 你的應用目前正在用Sencha Cmd構建
我們認識到並不是所有的客戶都有能力執行最新版本的框架和Sencha Cmd。
時間限制、最後上線期限和支援許可常常決定企業中使用的版本。
如果您的應用程式是基於Sencha框架的舊版本，那麼您可以參考與這些發行版相關的升級指南，作為深入學習的起點。
例如，Sencha Cmd 5升級指南。
安裝程式的變化
使用Sencha Cmd 6，我們引入了新的安裝程式，允許非管理員/root使用者安裝應用程式。
我們還在安裝程式中包含了Sencha Cmd執行需要的Java執行時環境(JRE)，所以你不需要單獨下載和安裝。
如果您已安裝了Sencha Cmd的早期版本，那麼您可能會在升級中遇到一些問題。
Windows PATH
使用Sencha Cmd的老版本的Windows使用者的PATH變化的一個副作用是，您將看不到新版本的Sencha在您的PATH前面。
這是很自然的，因為前面的老版本路徑 ，會覆蓋掉後面的新版本的路徑。
要管理你的路徑，請使用控制面板:
（譯者注：在環境變數欄裡，選擇系統級和使用者級的Path環境變數。系統級的環境變數會在使用者級的環境變數前面被查尋。）
在PATH環境變數的最終值中，系統Path字串出現在使用者路徑字串之前。
以前版本的Sencha Cmd安裝在系統路徑中，因此它們將“隱藏”新版本的路徑。
注：作業系統會按照先尋找系統路徑，再找使用者路徑的方式尋找Sencha Cmd。所以，在系統路徑中找到了就不再再繼續向下找了。
Mac OS X / Linux
在非windows平臺上，安裝程式現在通過修改/.bashprofile只在Path上新增一個位置，
export PATH=~/bin/Sencha/Cmd:$PATH
在以前的安裝程式中，您可能會發現多個入口，例如:
exportPATH=~/bin/Sencha/Cmd/5.1.1.39:$PATH
exportPATH=~/bin/Sencha/Cmd/5.1.2.52:$PATH
exportPATH=~/bin/Sencha/Cmd/5.1.3.61:$PATH
新的安裝程式現在維護了一個符號連結“/bin/sencha/cmd/sencha”，它指向最新安裝的版本。
遷移過程
在開始之前
清除狀態
遷移過程的第一步是確保在您的原始碼控制系統中沒有未提交的更改。
不建議在未提交更改時啟動升級。
這將讓你更容易地回顧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 6的最新版本。
您可以從Sencha網站下載SenchaCmd 6（http://www.sencha.com/products/sencha-cmd/）。
安裝Sencha Cmd並重新啟動您的終端。
如果您有一個較老版本的Sencha Cmd，您可能需要糾正您的PATH環境變數(見上文)。
注意:如果你安裝了以前的Cmd，它不會取代它，但是在執行Cmd軟體時它會優先考慮舊版本。
有關詳細資訊,請參閱上面。
配置合併工具
如果你選擇了一個合併工具，我們需要配置Sencha Cmd來使用這個合併工具。
要這樣做，您需要向配置檔案中新增兩個屬性:
cmd.merge.tool
cmd.merge.tool.args
我們可以把這些在“sencha.cfg”檔案中進行配置，該檔案位於Sencha Cmd安裝目錄。
另外，這兩個屬性可以以獨立於版本的方式設定，這樣您的配置引數將適用於SenchaCmd的所有版本。
詳情請見“sencha.cfg” 檔案的尾部。
Appl Upgrade
我們已經準備好開始升級了。
只需從應用程式的根資料夾中執行該命令，就可以完成升級操作:
sencha app upgrade path/to/ext6
您應該會看到少量的綠色文字，讓您知道您的應用程式已經成功地升級了。
如果您正在升級Ext JS 4.x，您應該參考Sencha Cmd 5升級指南的微載入器（Microloader）和構建屬性（Building Properties）部分。
同樣地，如果你在使用Cordova或PhoneGap，你也應該參考這些部分。
檢查原始碼
一旦應用程序升級完成，並且您已經解決了報告的任何可能的合併衝突，現在可能是通過原始碼控制檢視程式碼差異的好時機。
如果一切看起來都正常，那就最好提交程式碼，重新回到一個整潔的狀態。
清潔和構建
下一步是從應用程式根目錄快速構建一個應用:
sencha app build--clean development
請注意，--clean開關將從構建輸出資料夾中刪除所有檔案。
這將確保在以前的構建中沒有任何的快取檔案，但是為了安全起見，我們希望在繼續操作之前確保所有的更改都是提交的。
您可能需要做進一步的工作來使應用程式可構建，特別是當您使用Sencha Touch時。
如果是這樣，上面的構建將顯示錯誤。
一旦所有的構建錯誤被糾正，構建命令就會成功。
檢查
一旦所有的構建錯誤都得到了解決，就該提交程式碼更改了。
Cmd的升級階段到此完成。由於框架的升級，可能需要更多的更改，但是最好從一個可構建的應用程式開始。
監視
要使用Sencha Fashion(我們的新主題編譯器)實現的新的實時更新功能，應用程式必須由app watch託管。
使用watch，您現在可以在自己本地主機上的web伺服器的或在http://localhost:1841上檢視應用程式，這是我們自動為您定製的伺服器。
這個web伺服器是app watch預設的伺服器。
在Sencha Cmd 5之前，您必須單獨執行Sencha web start來使用Sencha Cmd web伺服器。
您可以使用如下這些屬性調整web伺服器配置(它們的預設值如下所示):
build.web.port=1841
build.web.root=${workspace.dir}
應用程式更新
當使用Sencha Cmd生成ExtJS 6應用程式時，下面的命令將生成一個通用應用程式(一個同時使用經典和現代工具包的應用):
sencha-sdk path/to/ext6 generate app YourAppName./AppFolder
要為Ext JS 6生成一個經典的工具型別的應用程式，新增“—classic“引數:
sencha -sdk path/to/ext6 generate app--classicYourAppName./AppFolder
類似地，生成一個僅使用現代工具箱的應用程式使用如下命令:
sencha -sdk path/to/ext6 generate app--modern YourAppName./AppFolder
app.json
使用Ext JS 6生成的應用程式擁有一個更完整的app.json檔案。
app.json檔案的某些部分可能需要合併到現有應用程式的app.json檔案中。
“sass”物件
該物件包含控制樣式編譯的屬性。下面的程式碼片段將在新生成的應用程式中應用。
如果您的app.json沒有一個“sass”物件，那麼您可以直接貼上以下內容。
/**
* Sass configuration properties.
*/
"sass":{
/**
* The root namespace to use when mapping*.scss files to classes in the
* sass/src and sass/var directories. Forexample, "App.view.Foo" would
* map to"sass/src/view/Foo.scss". If we changed this to "App.view"then
* it would map to"sass/src/Foo.scss". To style classes outside the app's
* root namespace, change this to"". Doing so would change the mapping of
* "App.view.Foo" to"sass/src/App/view/Foo.scss".
*/
"namespace":"App",
/**
* Comma-separated list of files or folderscontaining extra Sass. These
* files are automatically included in theSass compilation. By default this
* is just "etc/all.scss" toallow import directives to control the order
* other files are included.
*
* All "etc" files are includedat the top of the Sass compilation in their
* dependency order:
*
* +-------+---------+
* | | base |
* | theme +---------+
* | | derived |
* +-------+---------+
* | packages | (in package dependency order)
* +-----------------+
* | application |
* +-----------------+
*/
"etc":[
"sass/etc/all.scss",
"${toolkit.name}/sass/etc/all.scss"
],
/**
* Comma-separated list of folderscontaining Sass variable definitions
* files. These file can also define Sassmixins for use by components.
*
* All "var" files are includedafter "etc" files in the Sass compilation in
* dependency order:
*
* +-------+---------+
* | | base |
* | theme +---------+
* | | derived |
* +-------+---------+
* | packages | (in package dependency order)
* +-----------------+
* | application |
* +-----------------+
*
* The "sass/var/all.scss" fileis always included at the start of the var
* block before any files associated withJavaScript classes.
*/
"var":[
"sass/var/all.scss",
"sass/var",
"${toolkit.name}/sass/var"
],
/**
* Comma-separated list of folderscontaining Sass rule files.
*
* All "src" files are includedafter "var" files in the Sass compilation in
* dependency order (the same order as"etc"):
*
* +-------+---------+
* | | base |
* | theme +---------+
* | | derived |
* +-------+---------+
* | packages | (in package dependency order)
* +-----------------+
* | application |
* +-----------------+
*/
"src":[
"sass/src",
"${toolkit.name}/sass/src"
],
/**
* File used to save sass variables editedvia Sencha Inspector. This file
* content will override all othervariables.
*/
// "save":"sass/save.scss"
},
上面的屬性將替換掉”sencha/app/sencha.cfg”檔案中的“apps.sass.*”屬性。
儘管Fashion並不是Sass的一個實現，但我們在上下文中保留了“sass”這個術語，因為它在歷史上一直是這些路徑設定的名稱。
“css”陣列
以前，應用程式都有這些配置(在ExtJS 5或Sencha Con發行版中):
{
"path":"bootstrap.css",
"bootstrap":true
},
{
"path":"${build.out.css.path}"
"bundle":true
}
這些值將會被如下值取代：
我們新增的exclude屬性確保了CSS檔案在啟用Fashion時跳過，因為它將從.scss中構建CSS。
工作空間（workspace）更新
使用Sencha Cmd 6，會生成一個workspace.json檔案，此檔案新增到工作區根資料夾中。
雖然該檔案將在需要時生成，但在升級過程中會有一些注意事項。
workspace.json
這個檔案在預設情況下是這樣的:
{
/**
* An array of the paths to all theapplications present in
* this workspace
*/
"apps":[
"app1"
],
/**
* This is the folder for build outputs inthe workspace.
*/
"build":{
"dir":"${workspace.dir}/build"
},
/**
* These configs determine where packagesare generated and
* extracted to (when downloaded).
*/
"packages":{
/**
* This folder contains all local packages.
* If a comma-separated string is usedas value the first
* path will be used as the path togenerate new packages.
*/
"dir":"${workspace.dir}/packages/local,${workspace.dir}/packages",
/**
* This folder contains all extracted(remote) packages.
*/
"extract":"${workspace.dir}/packages/remote"
}
}
“apps”陣列包含了工作區中的SenchaCmd應用程式的相對路徑。
這個列表是由sencha generate app命令維護的，但是移除或重新定位應用程式需要手動修改這個陣列。以前生成的應用程式也需要手動新增。這一陣列目前並不是Sencha Cmd必需的，但對於未來的工具來說，有效地看到工作空間中的應用程式列表是很重要的。
Sencha Space更新
“Sencha Space”被重新命名為“Sencha Web Application Manager”。
如果你把Sencha Space與SenchaCmd整合在一起，你就需要app.json中將“space”物件修改為“manager”。