skimemo

_ NativeScriptのwebpack適用で注意すること

当初特にwebpack(--bundleオプション)の事など気にせずに開発してきて、途中で適用しようと思ったら色々エラーが出たのでそのメモです。

[もくじ]

_ app-main.xmlが無いと言われる

開発中のアプリは、起動時にapp.jsでログイン中か判断し、app-login.xml(未ログイン)かapp-main.xml(ログイン済み)かを切り分けています。その時使用しているのがapplication.run()です。

ところが、webpack適用時にapplication.run()};を使用するのにはのページ名にはある制限があります。それが、ファイル名の最後が root か page でなければならないです。このルールに則っていない場合、ページが見つからないというエラーが出ます。

[コード]

  1
  2
  3
  4
  5
  6
  7

if(loginManager.isLogin()){
    // ログイン済みページ
    application.run({ moduleName: "app-main" });
} else {
    // ログインor登録ページ
    application.run({ moduleName: "app-login" });
} 

[エラー]

System.err: Error: Failed to load component from module: ./app-login.xml or file: null

参考 Cannot navigate to a page with relative path using the @next version of the plugin

以下のようにコードを修正したら無事動くようになりました。

  1
  2
  3
  4
  5
  6
  7

if(loginManager.isLogin()){
    // ログイン済みページ
    application.run({ moduleName: "app-main-page" });
} else {
    // ログインor登録ページ
    application.run({ moduleName: "app-login-page" });
} 

_ nativescript-master-technology 使用時

nativescript-master-technologyは、アプリを終了させたり、現在がdebugモードか知る際に便利なプラグインです。readmeにもprocess.exit()のように書けば良いように記述されていますし、実際それで動作していました(webpack適用前は)。

しかし、webpack適用時は以下のように記述する必要があります。

global.process.exit();

global定義されたもは全てこのようにしなければいけないのかというとそういうわけでは無いようで、他のものはglobalを付けなくても動いていたりします。まだ良く理解できてない・・・。

_ ローカルファイルの読み込みの指定

WebViewには以下のように簡単にローカルファイルを渡すことができます。

[コード]

  1

context.description = "~/personal/licenses.html"; 

[XML]

  1

<WebView height="100%" src="{{ description }}" verticalAlignment="top" /> 

しかし、このままではページを表示した際に以下のようなエラーが出ます。

webpackでは関係ファイルをまとめてしまうため、こういった個別のファイルは個別にpackageへの同梱を指定してあげる必要があります。
具体的にはwebpack.config.jsに以下のように記述します。

  1
  2
  3
  4
  5
  6

plugins: [
   :
new CopyWebpackPlugin([
           :
     { from: { glob: "**/*.html" } },
           : 

参考 Webpack bundle location of index.html when serving locally on Nativescript webview

これでhtmlファイルもバンドルされ、webviewに読まれるようになります。