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>

打印页面