#blog2navi()
*NativeScriptのwebpack適用で注意すること [#xafb39ff]
~当初特にwebpack(--bundleオプション)の事など気にせずに開発してきて、途中で適用しようと思ったら色々エラーが出たのでそのメモです。
~[もくじ]
#contents
** app-main.xmlが無いと言われる [#h065ca4f]
~開発中のアプリは、起動時に&inlinecode{app.js};でログイン中か判断し、app-login.xml(未ログイン)かapp-main.xml(ログイン済み)かを切り分けています。その時使用しているのが&inlinecode{application.run()};です。
~ところが、webpack適用時に&inlinecode{application.run()};を使用するのにはある制限があります。それが、''ページ名の最後が root か page でなければならない''です。このルールに則っていない場合、ページが見つからないというエラーが出ます。
~[コード]
#code(php){{{
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:https://github.com/NativeScript/nativescript-dev-webpack/issues/546#issuecomment-395329562]]
~以下のようにコードを修正したら無事動くようになりました。
#code(php){{{
if(loginManager.isLogin()){
// ログイン済みページ
application.run({ moduleName: "app-main-page" });
} else {
// ログインor登録ページ
application.run({ moduleName: "app-login-page" });
}
}}}
** nativescript-master-technology 使用時 [#xa8a33d8]
~[[nativescript-master-technology:https://github.com/NathanaelA/nativescript-master-technology]]は、アプリを終了させたり、現在がdebugモードか知る際に便利なプラグインです。readmeにも&inlinecode{process.exit()};のように書けば良いように記述されていますし、実際それで動作していました(webpack適用前は)。
~しかし、webpack適用時は以下のように記述する必要があります。
global.process.exit();
global定義されたもは全てこのようにしなければいけないのかというとそういうわけでは無いようで、[[他のもの:https://www.webdb.co.jp/~atsumi/skimemo/index.php?skimemo%20-%20%C6%FC%B5%AD%2F2019-06-15%2FNativeScript%A4%CEiOS%C2%D0%B1%FE%BB%FE%A4%CB%B5%A4%A4%F2%A4%C4%A4%B1%A4%EB%A4%B3%A4%C8#y9134478]]はglobalを付けなくても動いていたりします。まだ良く理解できてない・・・。
** ローカルファイルの読み込みの指定 [#a7ed96e2]
WebViewには以下のように簡単にローカルファイルを渡すことができます。
~[コード]
#code(php){{{
context.description = "~/personal/licenses.html";
}}}
~[XML]
#code(php){{{
<WebView height="100%" src="{{ description }}" verticalAlignment="top" />
}}}
~しかし、このままではページを表示した際に以下のようなエラーが出ます。
#ref(Screenshot_20190617-214241.png);
~webpackでは関係ファイルをまとめてしまうため、こういった個別のファイルは個別にpackageへの同梱を指定してあげる必要があります。&br;具体的にはwebpack.config.jsに以下のように記述します。
#code(php){{{
plugins: [
:
new CopyWebpackPlugin([
:
{ from: { glob: "**/*.html" } },
:
}}}
~参考 [[Webpack bundle location of index.html when serving locally on Nativescript webview:https://stackoverflow.com/questions/52119223/webpack-bundle-location-of-index-html-when-serving-locally-on-nativescript-webvi]]
~これでhtmlファイルもバンドルされ、webviewに読まれるようになります。
#htmlinsert(twitterbutton.html)
RIGHT:Category: [[[NativeScript>日記/Category/NativeScript]]] - 09:29:44
----
RIGHT:&blog2trackback();
#comment(above)
#blog2navi()