Sencha Touch - 構建

如今，Web 應用程式的需求是開發一個快速且開發工作量少的應用程式。Sencha Touch 可以輕鬆實現這一點，因為它提供許多構建庫供選擇，這些庫基於開發或生產程式碼，並提供建立自定義構建的功能。

Sencha Touch 構建庫動態載入類。動態載入是指在需要時載入類，並且只會包含應用程式中需要的那些類。這使得應用程式執行得更快，因為要載入的檔案數量減少了，同時載入時間也減少了。

Sencha Touch 2.x 提供以下五個構建庫。

序號	構建和用法
1	sencha-touchdebug.js 此構建用於在本地開發應用程式。它是非壓縮版本，包含所有註釋和除錯日誌，以便在開發過程中輕鬆除錯。
2	senchatouch.js 此檔案用於生產環境。當我們進行自定義構建時，它是壓縮版本。
3	sencha-touchall.js 此檔案用於生產環境。當我們沒有進行自定義構建時，它是壓縮版本。
4	sencha-touchall-debug.js 此檔案用於生產環境中的除錯。它是非壓縮版本，包含所有註釋和除錯日誌。
5	sencha-touchall-compat.js 此構建用於將 1.x 版本遷移到 2.x 版本。它會在 1.x 版本程式碼不相容且需要程式碼修改的地方發出警告。

除了上述構建之外，Sencha Touch 還提供建立自定義構建的功能。

自定義構建的優勢

自定義構建不會載入所有 touch 檔案。它只加載應用程式中使用的那些檔案，這使得應用程式執行速度更快且易於維護。

Sencha CMD 用於建立自定義構建。要在 Sencha CMD 中建立自定義構建，請轉到應用程式檔案所在的目錄，並鍵入以下命令之一以建立構建。

序號	命令和用法
1	sencha app build native 構建應用程式並準備一個名為 packager.temp.json 的檔案，您可以使用它來打包應用程式 - packager.temp.json 與 packager.json 相同，但包含其他路徑。
2	sencha app build -run native 構建並自動打包應用程式，並啟動相應的模擬器。
3	sencha app build package 構建具有打包支援的應用程式，但不配置 packager JSON 檔案。這對於手動維護多個 packager.json 檔案的專案很有用。

序號

命令和用法

sencha app build native

構建應用程式並準備一個名為 packager.temp.json 的檔案，您可以使用它來打包應用程式 - packager.temp.json 與 packager.json 相同，但包含其他路徑。

sencha app build -run native

構建並自動打包應用程式，並啟動相應的模擬器。

sencha app build package

構建具有打包支援的應用程式，但不配置 packager JSON 檔案。這對於手動維護多個 packager.json 檔案的專案很有用。

構建成功後，它將生成 all-classes.js 檔案，我們需要將其包含在我們的 index.html 中以使其準備好投入生產。

以下程式碼顯示了為生產就緒程式碼所做的更改。

構建應用程式之前的 index.html

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-debug.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
   </head>
   <body>
   </body>
</html>

構建應用程式之後的 index.html

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
      <script type = "text/javascript" src = "app-classes.js"> </script>
   </head>
   <body>
   </body>
</html>

列印頁面