SenchaTouch-ビルド

Webアプリケーションに対する今日の需要は、開発の労力を抑えて高速なアプリケーションを開発することです。Sencha Touchは、カスタムビルドを作成する機能に加えて、開発コードまたは本番コードに基づいて選択できる多数のビルドライブラリを提供するため、これを簡単に行うことができます。

SenchaTouchビルドライブラリはクラスを動的にロードします。動的ロードは、必要なときにロードされるクラスを表し、アプリケーションで必要なクラスのみが含まれます。これにより、ロードするファイルの数が減るにつれてアプリケーションの実行が速くなり、同時にロードする時間が短縮されます。

Sencha Touch 2.xは、次の5つのビルドライブラリを提供します。

シニア番号 ビルドと使用法
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コードに互換性がなく、コードの変更が必要な場合は常に警告が表示されます。

上記のビルドで、SenchaTouchはカスタムビルドを作成する機能を提供します。

カスタムビルドを持つことの利点

カスタムビルドは、すべてのタッチファイルをロードするわけではありません。アプリケーションで使用しているファイルのみをロードするため、アプリケーションはより高速で簡単に保守できます。

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

パッケージングをサポートしてアプリをビルドしますが、パッケージャーのJSONファイルは構成しません。これは、複数のpackager.jsonファイルを手動で管理するプロジェクトに役立ちます。

ビルドが成功すると、all-classes.jsファイルが生成されます。このファイルをindex.htmlに含めて、本番環境に対応させる必要があります。

次のコードは、本番用のコードに対して実行する変更を示しています。

Index.html before building application

<!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 after building the application

<!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>