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>