Posted at

Ext JS 6.6 と npm

More than 1 year has passed since last update.

Ext JS 6.6 からは、SenchaCmd での構築の他に、 npm による構築ができるようになった。

それの使い方に関するメモ。

公式ドキュメント


npm レジストリの認証

npm login --registry=http://npm.sencha.com --scope=@sencha

ユーザー名・パスワードは、正規ユーザーの場合は、サポートサイトにログインする際に使うメールアドレスとパスワード。

正規ユーザーでない場合は、Evaluate - Sencha.com | Sencha.com に行ってトライアルにサインアップするとアカウントをもらえる。

アカウントの入力の際には、メールアドレスの方は、@.. に置き換える必要がある。


gxt-gen コマンドのインストール

npm install -g @sencha/ext-gen


アプリケーションの作成

SenchaCmd でいうと sencha generate app

ext-gen app -i

-i は interactive なので、生成オプションの質問に答える形で実行する

? would you like to see the defaults for package.json? No

? Would you like to create a package.json file with defaults? Yes
? What would you like to name your Ext JS app? NewApp
? What type of Ext JS template do you want? make a selection from a list
? What Ext JS template would you like to use? classicdesktop

こんな感じ。

オプションを指定すればサイレントに生成も可能

フォルダ構成、classicdesktop を使用しているので、app 下には desktopshared しかないが

universalclassicmodernuniversalmodern を指定すると、そこに phone フォルダもできる

▾ new-app/

▾ app/
▸ desktop/
▸ shared/
▾ build/
▸ development/
▸ temp/
▸ generatedFiles/
▸ node_modules/
▸ packages/
▸ resources/
app.js
app.json
build.xml
index.html
package-lock.json
package.json
Readme.md
webpack.config.js
workspace.json

SenchaCmd とちがって、生成されるファイル群は generatedFiles ディレクトリにまとめられているので、

.gitignore の内容が簡単なものになっている

/build

/generatedFiles
/cordova
/node_modules


アプリケーションの実行

cd new-app

npm start

webpack-dev-server が起動してページが表示される。


パッケージの追加

Premium のみのパッケージは追加インストールが必要

まず、workspace.jsonpackage 下の dir にパッケージのロケーションを追加する

ロケーションは ${framework.dir}/../ext-<package> (<package> は実際のパッケージ名で置き換える)

"packages": {

"dir": "${workspace.dir}/packages,${framework.dir}/../ext-<package>",

次に、npm でインストールする

npm i --save @sencha/ext-<package>

バッケージ一覧はこちら

Learn about Ext JS Packages | Ext JS 6.6.0

ext-charts などのパッケージ名もあるので、チャートを使う際には、インストールが必要なのかもしれない。(前の作業で作ったプロジェクトの node_modules/@sencha には ext-charts というフォルダはないので、おそらく必要なのだろうと思う)


ウォーターマーク

正規ユーザーであれば、ExtJS Trial というウォーターマークは表示されないはずだが、なぜか表示された。

npm の認証を再度実行したり、ターミナルを起動し直したりしてから、ext-gen を実行すると消すことができた。


既存プロジェクトのアップグレード

既存プロジェクトのアプリケーション フォルダで次を実行する

ext-gen upgrade

コンバートは一瞬で終わる、つぎに npm install する

npm install

アプリの実行は、新しく作った場合と同じ

npm start

workspace と app が分離している場合には正常に動作しなかった

Upgrade started

(node:51867) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, lstat 'workspace.json'
(node:51867) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Sencha Forum でも報告されているが解決法はない。実施する場合はサポートへの問い合わせが必要か。

'ext-gen' does not work with multi-app workspaces

そもそも、ext-gen では、複数の app を持つ workspace を想定していないのかもしれない。