ワークスペース、パッケージの作成

Senchaコマンドを使って「ワークスペース」という構成を作成できます。

バックエンド用とフロントエンド用のプロジェクトが必要というような、ExtJSアプリケーションを複数作成する場合は特に便利です。

複数アプリケーションで共通のExtJS SDKやパッケージを参照できるようになるため、コードの再利用性を高めることができます。

ワークスペースの作り方

ワークスペースは、下記コマンドで作成します。

sencha -sd (ExtJSのSDKのパス) generate workspace (作成するワークスペースのパス)

-sdオプションは必須ではないですが、付けておくと共通で使用するSDKのコピーもやってくれます(ワークスペース直下に作成されるextディレクトリ)。

実行すると.gitignoreファイル、workspace.jsonファイル、そしてextディレクトリが作成されたはずです。

extディレクトリが共通で利用するExtJS SDKになります。

ワークスペース内にアプリケーションを作成

作成したワークスペースにアプリケーションを作成してみます。

ワークスペースに移動して、下記を実行します。

sencha -sd ./ext generate app Front ./apps/Front

apps/FrontにExtJSアプリケーションが作成されました(フロントエンド用のという意味で「Front」としてみました)。

同じようにBackendも作成してみます。

sencha -sd ./ext generate app Backend ./apps/Backend

apps/BackendにExtJSアプリケーションが作成されました(バックエンド用という意味で「Backend」としてみました)。

これでワークスペース内に2つのExtJSアプリケーションを作成できました。

パッケージの作り方

次にパッケージを作ってみます。

ワークスペースに移動して、下記を実行します。

sencha generate package Common

すると、packages/local/Commonにパッケージが作成されたはずです。

作成した時点ではclassicとmodern用に分かれていないので、分ける場合はapp.jsonのclasspath等を修正します(↓の箇所ぐらいかな？)。

"classpath": [
    "${package.dir}/src",
    "${package.dir}/${toolkit.name}/src"
],

"overrides": [
    "${package.dir}/overrides",
    "${package.dir}/${toolkit.name}/overrides"
],

"sass": [
    "etc": [
        "${package.dir}/sass/etc/all.scss",
        "${package.dir}/${toolkit.name}/sass/etc/all.scss"
    ],

    "var": [
        "${package.dir}/sass/var",
        "${package.dir}/${toolkit.name}/sass/var"
    ],

    "src": [
        "${package.dir}/sass/src",
        "${package.dir}/${toolkit.name}/sass/src"
    ]
]

あとは対応するディレクトリを適宜作成すれば、1パッケージにclassicとmodern用のモジュールを作成できます。

ちなみに初めから2つパッケージを作って、それぞれclassic用とmodern用にするのもアリだと思います。

あとは、ExtJSアプリケーション側のapp.jsonでrequiresに追記すれば使えるようになります。

"requires": [
    "font-awesome",
    "Common"
]