001-Sencha Cmd 6.5的新特性
阿新 • • 發佈：2018-11-30
#Sencha Cmd 6.5.1的新特性
## 動態載入包的最小體積的構建
在Ext JS 6.5.0中，使用新的動態包載入器的應用程式的構建輸出包含了所有的框架類。
這是因為動態載入的包是單獨構建的，應用程式不知道它們的框架依賴關係。
對於Ext JS 6.5.1，動態包的類的引用可以傳遞給應用程式構建，並允許它只包含需要的類，如下所示:
"output": {
"js": {
"filter": "minimum"
}
}
備選的過濾器選項是“all”，其中包括所有來自“used”的包的程式碼，以及“使用”(6.5.0中的預設行為)，其中包括應用程式所需要的所有程式碼和它所使用的包的所有程式碼。
## 手動從構建中排除類
現在您可以手動地從構建中排除類名。這有助於刪除Sencha Cmd自動依賴掃描器檢測到的程式碼，但實際上並不是應用程式所使用的。例如:
"js": {
"exclude": [
"Ext.data.BufferedStore",
...
]
}
# 在Sencha Cmd 6.5中的新特性
## 簡介
Sencha Cmd 6.5有幾個主要的和次要的特性和增強，它們可以幫助您簡化開發過程，使用最新的web技術優勢，充分利用Ext JS 6.5的功能。
## ECMAScript 2015(或ES6)
使用Sencha Cmd 6.5，您可以使用箭頭函式、let關鍵字、物件去結構化以及幾乎所有的ES6中的酷炫新特性來編寫程式碼。
Sencha Cmd將編譯你的程式碼讓它到處都可以執行。
這種翻譯被稱為“轉換機（transpiler）”，在內部，Sencha Cmd使用Google（Google's Closure Compiler）的閉包編譯器來轉換你的程式碼。
Cmd還利用了閉包所提供的所有填充，因此您也可以使用那些花哨的新陣列方法，而不用擔心哪些瀏覽器支援它們。
有些情況下，你不需要所有的這些。
也許你的目標是電子，或者你只支援擁有所有這些特性的現代瀏覽器。
您可以禁用轉換機，並且仍然使用Sencha Cmd程式碼壓縮器來對您的原生ES6程式碼進行編譯。
只需對app.json檔案進行一個調整，就可以對transpiler和它的polyfills說再見:
"output": {
"js": {
"version": "ES6"
}
}
## 動態包載入
Sencha Cmd多年來一直支援包的概念，大型應用程式經常利用包來封裝類、樣式和資源。
然後，Sencha Cmd將這些部分構建到你的應用程式中。
現在，您可以以一種全新的方式使用這些包——動態載入。
如果您現在正在使用包，那麼您將在您的app.json中的“requires”陣列中看到:
requires: [
'dashboard',
'settings',
'users'
]
要切換到動態載入，只需將其中的一些或全部移動到“uses”陣列中，並新增一個新的包來“引用”這些uses陣列中的包，這個新的包名為‘package-loader’:
requires: [
'package-loader'
],
uses: [
'dashboard',
'settings',
'users'
]
在這些變化之後，當Sencha Cmd構建應用程式時，它將為應用程式和每個使用的包分別生成單獨的包。
當您的應用程式載入時，它只包含它的程式碼和'requires'資料中的包的程式碼，而不是uses中的包。
相反，這些‘uses’陣列中的包的JavaScript、CSS和資源將會出現在應用程式的構建（build）資料夾中，就像影象或其他資源一樣。
當包資源準備好後，Ext.Package.load()方法使載入包變得很簡單。
包載入程式處理包的JavaScript和CSS資產，並遞迴地載入任何包內可能引用的其他包。
如果您正在使用Ext JS路由，您可能會做一些類似如下的事情來載入一個包:
routes: {
':type': {
before: 'loadPackage',
action: 'showView'
}
},
loadPackage: function (type, action) {
var view = this.getView(),
pkg = this.getPackageForType(type);
if (!pkg || Ext.Package.isLoaded(pkg)) {
action.resume();
}
else {
view.setMasked({
message: 'Loading Package...'
});
Ext.Package.load(pkg).then(function () {
view.setMasked(null);
action.resume();
});
}
},
對於使用者來說，使用動態包載入可以節省時間。
他們不再需要等待應用程式的每一個位元組來載入，實際上他們只需要大約20%的時間。
它還可以節省開發人員的時間，因為Sencha Cmd不再需要載入所有程式碼來進行“dev”模式構建，或者同時監視所有程式碼。
在“app build”和“app watch”命令中有許多新的命令列開關，讓你可以控制哪些外部包(如果有的話)來構建或監視。
這允許您通過將構建限制在當前工作的包(s)上，從而大大減少構建時間。
## 檢視它的實際案例
為了讓您入門，我們編寫了一個演示應用程式，它在一些實際場景中使用了一些包。
檢視GitHub的倉庫（https://github.com/sencha-extjs-examples/MultiPackageDemo）。
## Progressive Web Apps
Progressive Web Apps(PWAs)提供了一種使用現代Web技術的近乎原生的應用體驗。
有了PWA，你可以顯示一個橫幅，邀請Android使用者在他們的主螢幕上安裝你的應用。
通過服務執行緒的魔力和它的快取(目前在Chrome和Firefox中支援)，你的應用甚至可以離線執行。
Sencha Cmd簡化構建過程通過提供一個預構建服務工人(基於谷歌https://github.com/GoogleChrome/sw-toolbox)。
服務執行緒可以在app.json中配置，它的快取清單可以由Sencha Cmd在原始碼中使用@sw-cache 的註釋來增強。
這些註釋告訴Cmd，您需要快取特定的資源，還可以配置如何管理每項資源。
### PWA例子
我們已經整合了一個progressive web 應用示例來展示它是如何工作的。
檢視GitHub上的“倉庫”，並按照README的指示開始。
GitHub的倉庫（https://github.com/sencha-extjs-examples/PWA）包含了Ext JS前端應用程式和基於Node.js的後端服務。
## 專案結構
使用Sencha Cmd 6.5，生成的應用程式不再包含“Sencha app build”命令所使用的構建指令碼。
這些指令碼現在已經從sencha Cmd安裝目錄載入，而不是把它們放在本地的.sencha資料夾。
“sass”目錄也不再為應用程式生成。
你可以把你的*.scss檔案放在與JavaScript檔案相同的目錄中。
換句話說，對於Foo檢視資料夾，您可能擁有所有這些檔案:
foo/
Foo.js
Foo.scss
FooController.js
FooModel.js
建議在app/Application.scss檔案或從那裡匯入的檔案的檔案中新增通用或全域性樣式。
### 框架管理
為了簡化新專案的設定，如果你有多個應用的話,你可以利用新的“sencha app init”和“sencha app install”命令以及它們的“工作空間”對應的“sencha workspace init”和“sencha workspace install”命令來管理框架。
所有這些命令都接受了您已經提取Ext JS的路徑。
如果您下載並將Sencha SDK的所有內容都提取到一個單獨的資料夾中，您可以像這樣簡化這些命令:
$ sencha config --prop sencha.sdk.path=~/sencha-sdks --save
在Windows系統中，“~”的部分將被“C:\Uses\Me\”類似的路徑所取代。
現在，“sencha-sdks”包含了您下載和提取的所有SDK zips，並且您已經使用“sencha config --ave”儲存了這條路徑，您不需要將--frameworks引數傳遞給任何init或install命令。
## 已知的問題
在升級到Cmd 6.5.0之後，一些使用者可能很難構建他們的原生Cordova應用程式。
如果您收到與Cordova平臺配置有關的任何錯誤，請手工建立一個名為cordova.local.properties的檔案，如果該檔案不存在的話。然後將下面的程式碼放在檔案中並再次嘗試構建:
cordova.platforms=${app.cordova.config.platforms}
注意:cordova.localproperties 檔案應該放置在專案的根目錄中。
## 動態載入包的最小體積的構建
在Ext JS 6.5.0中，使用新的動態包載入器的應用程式的構建輸出包含了所有的框架類。
這是因為動態載入的包是單獨構建的，應用程式不知道它們的框架依賴關係。
對於Ext JS 6.5.1，動態包的類的引用可以傳遞給應用程式構建，並允許它只包含需要的類，如下所示:
"output": {
"js": {
"filter": "minimum"
}
}
備選的過濾器選項是“all”，其中包括所有來自“used”的包的程式碼，以及“使用”(6.5.0中的預設行為)，其中包括應用程式所需要的所有程式碼和它所使用的包的所有程式碼。
## 手動從構建中排除類
現在您可以手動地從構建中排除類名。這有助於刪除Sencha Cmd自動依賴掃描器檢測到的程式碼，但實際上並不是應用程式所使用的。例如:
"js": {
"exclude": [
"Ext.data.BufferedStore",
...
]
}
# 在Sencha Cmd 6.5中的新特性
## 簡介
Sencha Cmd 6.5有幾個主要的和次要的特性和增強，它們可以幫助您簡化開發過程，使用最新的web技術優勢，充分利用Ext JS 6.5的功能。
## ECMAScript 2015(或ES6)
使用Sencha Cmd 6.5，您可以使用箭頭函式、let關鍵字、物件去結構化以及幾乎所有的ES6中的酷炫新特性來編寫程式碼。
Sencha Cmd將編譯你的程式碼讓它到處都可以執行。
這種翻譯被稱為“轉換機（transpiler）”，在內部，Sencha Cmd使用Google（Google's Closure Compiler）的閉包編譯器來轉換你的程式碼。
Cmd還利用了閉包所提供的所有填充，因此您也可以使用那些花哨的新陣列方法，而不用擔心哪些瀏覽器支援它們。
有些情況下，你不需要所有的這些。
也許你的目標是電子，或者你只支援擁有所有這些特性的現代瀏覽器。
您可以禁用轉換機，並且仍然使用Sencha Cmd程式碼壓縮器來對您的原生ES6程式碼進行編譯。
只需對app.json檔案進行一個調整，就可以對transpiler和它的polyfills說再見:
"output": {
"js": {
"version": "ES6"
}
}
## 動態包載入
Sencha Cmd多年來一直支援包的概念，大型應用程式經常利用包來封裝類、樣式和資源。
然後，Sencha Cmd將這些部分構建到你的應用程式中。
現在，您可以以一種全新的方式使用這些包——動態載入。
如果您現在正在使用包，那麼您將在您的app.json中的“requires”陣列中看到:
requires: [
'dashboard',
'settings',
'users'
]
要切換到動態載入，只需將其中的一些或全部移動到“uses”陣列中，並新增一個新的包來“引用”這些uses陣列中的包，這個新的包名為‘package-loader’:
requires: [
'package-loader'
],
uses: [
'dashboard',
'settings',
'users'
]
在這些變化之後，當Sencha Cmd構建應用程式時，它將為應用程式和每個使用的包分別生成單獨的包。
當您的應用程式載入時，它只包含它的程式碼和'requires'資料中的包的程式碼，而不是uses中的包。
相反，這些‘uses’陣列中的包的JavaScript、CSS和資源將會出現在應用程式的構建（build）資料夾中，就像影象或其他資源一樣。
當包資源準備好後，Ext.Package.load()方法使載入包變得很簡單。
包載入程式處理包的JavaScript和CSS資產，並遞迴地載入任何包內可能引用的其他包。
如果您正在使用Ext JS路由，您可能會做一些類似如下的事情來載入一個包:
routes: {
':type': {
before: 'loadPackage',
action: 'showView'
}
},
loadPackage: function (type, action) {
var view = this.getView(),
pkg = this.getPackageForType(type);
if (!pkg || Ext.Package.isLoaded(pkg)) {
action.resume();
}
else {
view.setMasked({
message: 'Loading Package...'
});
Ext.Package.load(pkg).then(function () {
view.setMasked(null);
action.resume();
});
}
},
對於使用者來說，使用動態包載入可以節省時間。
他們不再需要等待應用程式的每一個位元組來載入，實際上他們只需要大約20%的時間。
它還可以節省開發人員的時間，因為Sencha Cmd不再需要載入所有程式碼來進行“dev”模式構建，或者同時監視所有程式碼。
在“app build”和“app watch”命令中有許多新的命令列開關，讓你可以控制哪些外部包(如果有的話)來構建或監視。
這允許您通過將構建限制在當前工作的包(s)上，從而大大減少構建時間。
## 檢視它的實際案例
為了讓您入門，我們編寫了一個演示應用程式，它在一些實際場景中使用了一些包。
檢視GitHub的倉庫（https://github.com/sencha-extjs-examples/MultiPackageDemo）。
## Progressive Web Apps
Progressive Web Apps(PWAs)提供了一種使用現代Web技術的近乎原生的應用體驗。
有了PWA，你可以顯示一個橫幅，邀請Android使用者在他們的主螢幕上安裝你的應用。
通過服務執行緒的魔力和它的快取(目前在Chrome和Firefox中支援)，你的應用甚至可以離線執行。
Sencha Cmd簡化構建過程通過提供一個預構建服務工人(基於谷歌https://github.com/GoogleChrome/sw-toolbox)。
服務執行緒可以在app.json中配置，它的快取清單可以由Sencha Cmd在原始碼中使用@sw-cache 的註釋來增強。
這些註釋告訴Cmd，您需要快取特定的資源，還可以配置如何管理每項資源。
### PWA例子
我們已經整合了一個progressive web 應用示例來展示它是如何工作的。
檢視GitHub上的“倉庫”，並按照README的指示開始。
GitHub的倉庫（https://github.com/sencha-extjs-examples/PWA）包含了Ext JS前端應用程式和基於Node.js的後端服務。
## 專案結構
使用Sencha Cmd 6.5，生成的應用程式不再包含“Sencha app build”命令所使用的構建指令碼。
這些指令碼現在已經從sencha Cmd安裝目錄載入，而不是把它們放在本地的.sencha資料夾。
“sass”目錄也不再為應用程式生成。
你可以把你的*.scss檔案放在與JavaScript檔案相同的目錄中。
換句話說，對於Foo檢視資料夾，您可能擁有所有這些檔案:
foo/
Foo.js
Foo.scss
FooController.js
FooModel.js
建議在app/Application.scss檔案或從那裡匯入的檔案的檔案中新增通用或全域性樣式。
### 框架管理
為了簡化新專案的設定，如果你有多個應用的話,你可以利用新的“sencha app init”和“sencha app install”命令以及它們的“工作空間”對應的“sencha workspace init”和“sencha workspace install”命令來管理框架。
所有這些命令都接受了您已經提取Ext JS的路徑。
如果您下載並將Sencha SDK的所有內容都提取到一個單獨的資料夾中，您可以像這樣簡化這些命令:
$ sencha config --prop sencha.sdk.path=~/sencha-sdks --save
在Windows系統中，“~”的部分將被“C:\Uses\Me\”類似的路徑所取代。
現在，“sencha-sdks”包含了您下載和提取的所有SDK zips，並且您已經使用“sencha config --ave”儲存了這條路徑，您不需要將--frameworks引數傳遞給任何init或install命令。
## 已知的問題
在升級到Cmd 6.5.0之後，一些使用者可能很難構建他們的原生Cordova應用程式。
如果您收到與Cordova平臺配置有關的任何錯誤，請手工建立一個名為cordova.local.properties的檔案，如果該檔案不存在的話。然後將下面的程式碼放在檔案中並再次嘗試構建:
cordova.platforms=${app.cordova.config.platforms}
注意:cordova.localproperties 檔案應該放置在專案的根目錄中。