TL;DR
package.jsonに
"scripts": {
"ios-iphone": "tns run ios --device 'iPhone 8'"
},
を追加する
教えてくれた人
tns run iosよ、あなたはなぜiPad Airを起動するのか
NativeScript−VueのアプリをMac OS Catalina10.15.4で開発中にiOSエミュレータをtns run ios（デフォルト）やnpm run serve:ios(vue-cli-plugin-nativescript-vueでコードシェアリングしている場合)で起動すると、iPad AirのSimulatorが起動する。
しかし私はiPhoneで確認したい。
デフォルトのデバイスの設定を変更するにはどうすればよいのか？
利用可能なエミュレータデバイスの一覧を取得し、好みのデバイスの正式名称をみつけ、それをつかってpackage.jsonにnpmのコマンドを追加すればよい。
デバイスの一覧を確認する
$ tns device ios --available-devices
Available emulators
┌───────────────────────┬──────────┬─────────┬────────────────────┬────────────────────┬────────────┐
│ Device Name │ Platform │ Version │ Device Identifier │ Image Identifier │ Error Help │
│ iPhone 8 │ iOS │ 13.5 │ 77A88E1D-AE2F-4D55 │ 77A88E1D-AE2F-4D55 │ │
│ │ │ │ -91C6-443A655EC2AF │ -91C6-443A655EC2AF │ │
│ iPhone 8 Plus │ iOS │ 13.5 │ 4B3BE0B3-03D6-4D65 │ 4B3BE0B3-03D6-4D65 │ │
│ │ │ │ -997F-6EC1EAFB67BE │ -997F-6EC1EAFB67BE │ │
│ iPhone 11 │ iOS │ 13.5 │ E42203D6-B46A-4B32 │ E42203D6-B46A-4B32 │ │
│ │ │ │ -BC4C-E313010EC310 │ -BC4C-E313010EC310 │ │
│ iPhone 11 Pro │ iOS │ 13.5 │ D3C18B17-25B1-438E │ D3C18B17-25B1-438E │ │
│ │ │ │ -ACFD-9BE0AD63A688 │ -ACFD-9BE0AD63A688 │ │
│ iPhone 11 Pro Max │ iOS │ 13.5 │ FB6AB7FD-F383-4279 │ FB6AB7FD-F383-4279 │ │
│ │ │ │ -9D84-11D0C3600A07 │ -9D84-11D0C3600A07 │ │
│ iPhone SE (2nd │ iOS │ 13.5 │ D3C08BAB-44FF-4716 │ D3C08BAB-44FF-4716 │ │
│ generation) │ │ │ -9155-351ACA2C0C6A │ -9155-351ACA2C0C6A │ │
│ iPad Pro (9.7-inch) │ iOS │ 13.5 │ A2CD1BE4-6E7C-453E │ A2CD1BE4-6E7C-453E │ │
│ │ │ │ -834C-471AC302AB4B │ -834C-471AC302AB4B │ │
│ iPad (7th generation) │ iOS │ 13.5 │ AD6AE69D-351F-491B │ AD6AE69D-351F-491B │ │
│ │ │ │ -8500-275BAFEB5F24 │ -8500-275BAFEB5F24 │ │
│ iPad Pro (11-inch) │ iOS │ 13.5 │ 3E65C5CC-A8DE-4519 │ 3E65C5CC-A8DE-4519 │ │
│ (2nd generation) │ │ │ -AEC7-A7D06437A6A1 │ -AEC7-A7D06437A6A1 │ │
│ iPad Pro (12.9-inch) │ iOS │ 13.5 │ DC3C58C4-9A3D-48F9 │ DC3C58C4-9A3D-48F9 │ │
│ (4th generation) │ │ │ -A0CA-6F978AA4D3BD │ -A0CA-6F978AA4D3BD │ │
│ iPad Air (3rd │ iOS │ 13.5 │ E49C87CF-02ED-4BB1 │ E49C87CF-02ED-4BB1 │ │
│ generation) │ │ │ -9685-88A8F612033F │ -9685-88A8F612033F │ │
└───────────────────────┴──────────┴─────────┴────────────────────┴────────────────────┴────────────┘
自分の好みのデバイスをひとつDevice Nameから選ぶ。ここではiPhone 8を使うことにしよう。
package.jsonを編集する
つぎに、自分のNativeScript-Vueプロジェクト配下のpackage.jsonをテキストエディタで開く。scriptsのセクションがなければ追加する。あればそこに次の行を追加する。デバイス名は上述の通り'iPhone 8'になる。"serve:iphone"の部分は実際にコマンドラインで打ち込む際のオプションであり、好きなように変えてよい。
"scripts": {
"serve:iphone": "tns run ios --device 'iPhone 8'"
},
全文は例えばこうなる
package.json
{
"nativescript": {
"id": "org.nativescript.radsidenavigator",
"tns-android": {
"version": "6.5.0"
},
"tns-ios": {
"version": "6.5.0"
}
},
"scripts": {
"serve:iphone": "tns run ios --device 'iPhone 8'" ← added!
},
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"repository": "<fill-your-repository-here>",
"dependencies": {
"@nativescript/theme": "~2.3.3",
"eslint": "^7.1.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"nativescript-ui-sidedrawer": "~8.0.0",
"nativescript-vue": "~2.5.0",
"nativescript-vue-navigator": "^1.2.0",
"prettier": "^2.0.5",
"rxjs": "^6.4.0",
"tns-core-modules": "~6.5.0"
},
"devDependencies": {
"@babel/core": "~7.1.0",
"@babel/preset-env": "~7.1.0",
"babel-loader": "~8.0.0",
"nativescript-dev-webpack": "~1.5.1",
"nativescript-vue-template-compiler": "~2.5.0",
"node-sass": "^4.7.1",
"vue-loader": "~15.9.0"
},
"gitHead": "2250137db8c1e0bd0eb543e8e4563cb71480c00d",
"readme": "NativeScript Application"
}
Vue-CLIのコードシェアリング機能を使ってプロジェクトをはじめた場合は
"serve:iphone": "npm run setup-webpack-config && tns run ios --device 'iPhone 8' && npx vue-devtools",
を追加すればよい。その場合、scriptsのセクションは次のようになる。
package.json
"scripts": {
"lint": "vue-cli-service lint",
"build:android": "npm run setup-webpack-config && tns build android --env.production && npm run remove-webpack-config",
"build:ios": "npm run setup-webpack-config && tns build ios --env.production && npm run remove-webpack-config",
"build:web": "vue-cli-service build --mode production.web",
"clean:android": "rimraf platforms/android",
"clean:ios": "rimraf platforms/ios",
"clean:platforms": "rimraf platforms",
"debug:android": "npm run setup-webpack-config && tns debug android --env.development",
"debug:ios": "npm run setup-webpack-config && tns debug ios --env.development",
"preview:android": "npm run setup-webpack-config && tns preview --env.development --env.android",
"preview:ios": "npm run setup-webpack-config && tns preview --env.development --env.ios",
"remove-webpack-config": "node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance post",
"serve:android": "npm run setup-webpack-config && tns run android --env.development",
"serve:ios": "npm run setup-webpack-config && tns run ios --env.development",
"serve:iphone": "npm run setup-webpack-config && tns run ios --device 'iPhone 8' && npx vue-devtools",
"serve:web": "vue-cli-service serve --mode development.web",
"setup-webpack-config": "node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance pre"
},
実際にiPhoneエミュレータで起動してみる
以降は、tns run iosではなく先述の"serve:iphone"の部分を使って
$ npm run serve:iphone
などとすればiPhone 8のエミュレータが起動する（iPad Airは起動しない）。
コードシェアリング機能を使って上記のように設定した場合も同様に
npm run serve:iphone
とすればよい。コマンド名は自分に馴染むものであればなんでもよいと思うが、チームでやっている場合は共通でひとつ決めてしまえばよいと思う。