Ext JS 6.6 と npm

Ext JS 6.6 からは、SenchaCmd での構築の他に、 npm による構築ができるようになった。
それの使い方に関するメモ。

公式ドキュメント

- [Using Open Tooling | Ext JS 6.6.0](https://docs.sencha.com/extjs/6.6.0/guides/getting_started/open_tooling.html)
- [Update existing app with NPM | Ext JS 6.6.0](https://docs.sencha.com/extjs/6.6.0/guides/npm_packages/npm_update.html)


### npm レジストリの認証

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

ユーザー名・パスワードは、正規ユーザーの場合は、サポートサイトにログインする際に使うメールアドレスとパスワード。
正規ユーザーでない場合は、[Evaluate - Sencha.com | Sencha.com](https://www.sencha.com/products/extjs/evaluate/) に行ってトライアルにサインアップするとアカウントをもらえる。

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


### 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* 下には *desktop* と *shared* しかないが
`universalclassicmodern` や `universalmodern` を指定すると、そこに *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.json* の `package` 下の `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](https://docs.sencha.com/extjs/6.6.0/guides/npm_packages/extjs_packages.html) 
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](https://www.sencha.com/forum/showthread.php?470353-ext-gen-does-not-work-with-multi-app-workspaces)

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