Sencha Cmd中的工作空間

本指南介紹了Sencha Cmd的工作區。工作區被設計用來支援在多個應用程式間共享框架、程式碼、樣式和資源。

先決條件

在繼續深入之前，推薦閱讀以下指南：

• Sencha Cmd概論
• 使用Sencha Cmd

工作空間是什麼?

構建大型應用程式的過程與構建單頁面應用程式的過程相同。
一旦應用程式擴充套件到需要多個頁面，就會出現一些常見問題：

• 使用Sencha框架的通用副本（Ext JS和/或Sencha Touch）。
• 使用跨頁面通用的程式碼。
• 共享或第三方包。
  為了支援這些，Sencha Cmd定義了“工作區(Workspace)”的概念。
  工作空間就是一個資料夾，它最終包含一個或多個頁面、框架、包和其他共享程式碼或檔案。
  工作空間根資料夾的位置，應該選擇在滿足這些需求，以及您的原始碼控制需求的地方。
  任何在工作空間資料夾的子資料夾中建立的應用程式/頁面，不管它們的深度如何，都被認為是工作空間的成員。

雖然不是必需的，但通常情況下，工作區資料夾是原始碼控制儲存庫中的根資料夾。

在您的工作空間中，您的頁面的具體組織形式對於Sencha Cmd來說並不重要。
但是，為了簡單起見，本指南中的示例將所有頁面建立為工作空間的直接子資料夾。

注意術語。
“應用程式（application）”這個術語可能會讓人感到困惑，因為它在不同的組織結構中是過載的，並且具有不同的規模。
對於Sencha框架，“應用程式”是一個web頁面。
通常，這些應用程式呼叫Ext.application()在頁面載入中啟動適當的程式碼。
如果一個專案需要多個頁面，那麼通常情況下，整個頁面集合被稱為“應用程式”。
為了這些指南，我們將使用Sencha框架裡的概念來理解一個應用程式，將它理解為一個web頁面。

生成一個工作區

要生成工作空間，請使用以下命令：
sencha generate workspace /path/to/workspace
這將在指定的資料夾中建立下列結構。

workspace.json          # The JSON descriptor for the workspace.
.sencha/                # Sencha-specific files (e.g. configuration)
  workspace/          # Workspace-specific content (see below)
    sencha.cfg      # Configuration file for Sencha Cmd
    plugin.xml      # Plugin for Sencha Cmd
 

配置

配置類似於應用程式的配置。
“app.json”檔案儲存了單個應用程式的配置，而“workspace.json“包含工作空間中所有應用程式的配置屬性。

框架的位置

Sencha Ext JS或Sencha Touch的位置（例如“SDK”或“framework”）作為工作空間的配置屬性儲存在配置檔案中。
這允許多個頁面共享這個配置。
不同的團隊會對這些位置有不同的偏好，以及Sencha SDK是否儲存在它們的原始碼控制系統中。
下面討論的設定使您能夠控制Sencha SDK在您的工作空間中的位置。

預設情況下，工作區包含Sencha Ext JS和Sencha Touch兩種SDK。
這些屬性的設定在“.sencha/workspace/sencha.cfg”檔案中的如下配置項中：

ext.dir=${workspace.dir}/ext
touch.dir=${workspace.dir}/touch

workspace.dir屬性的值由Sencha Cmd確定，並根據需要擴充套件。
換句話說，預設情況下，工作區內含有它所包含的應用程式所使用的SDK的副本。

應用程式在他們的“app.json”檔案中通過framework屬性間接引用了他們的框架：

"framework": "ext"   

生成頁面

一旦您擁有了一個工作區，生成頁面（“應用程式(apps)”）就可以像以前那樣做了，但是使用工作空間中的“ext”資料夾而非sdk目錄：

cd apps
sencha -sdk ../ext generate app NewExtApp new-app

另外，–ext開關可用於從工作空間中選擇“ext”框架，而不必擔心它的路徑：

cd apps
sencha generate app --ext NewExtApp new-app

因為這些生成的頁面的目標在工作區中，所以會建立下面的結構（這與單頁應用程式稍有不同）：

workspace.json              # The JSON descriptor for the workspace
.sencha/                    # Sencha-specific files (e.g. configuration)
    workspace/              # Workspace-specific content (see below)
        sencha.cfg          # Workspace's configuration file for Sencha Cmd
        plugin.xml          # Workspace plugin for Sencha Cmd

ext/                        # A copy of the Ext JS SDK
    ...

touch/                      # A copy of the Sencha Touch SDK
    ...

extApp/
    .sencha/                # Sencha-specific files (e.g. configuration)
        app/                # Application-specific content
            sencha.cfg      # Application's configuration file for Sencha Cmd
    app.json                # The JSON descriptor for the application

touchApp/
    .sencha/                # Sencha-specific files (e.g. configuration)
        app/                # Application-specific content
            sencha.cfg      # Configuration file for Sencha Cmd
    app.json                # The JSON descriptor for the application

build/                      # The folder where build output is placed.
    production/             # Build output for production
        touchApp/
        extApp/
    testing/                # Build output for testing
        touchApp/
        extApp/

要生成更多的頁面，請重複上述命令。

構建應用程式

構建應用程式的過程與一個或多個應用程式沒有什麼不同。
將工作目錄切換到應用程式的根目錄並執行：

sencha app build
為了提高效率，您可以為這個過程建立一個指令碼。

包

Sencha Cmd提供了一個強大的包管理子系統，可以用來下載和整合JavaScript、樣式和資源包到您的應用程式中。

workspace.json      # The JSON descriptor for the workspace
  packages/       # Container folder for shared Cmd packages
    local/      # Folder for packages generated in this workspace
    remote/     # Folder for packages downloaded into the workspace     

通常，“packages/remote”資料夾會被原始碼控制系統所忽略，因為這些包總是可以從包儲存庫中再次下載和提取。

注意：在以前的版本中，所有的包都被放置在“packages”資料夾中。
這種分離雖然在大多數情況下很有幫助，但也可以在“workspace.json”中進行更改。

下一個步驟

在繼續深入之前，推薦閱讀以下指南：

• Sencha Cmd包
• 建立Sencha Cmd包