MonacaとNCMBは簡単に組み合わせて使えるのがメリットですが、最新のMonacaプロジェクトではWebPack4系が使われており、ビルド環境において問題が発生します。今回はVue + Onsen UI2でNCMBを利用するための手順を紹介します。
デフォルトではエラーが出ます
デフォルトのまま使おうとすると Module not found: Error: Can't resolve 'json' というエラーが頻発します。様々な設定を変更したのですが、解決するのに時間がかかりました。
結果から言えば、 webpack.config.js のJSON設定を削除すればエラーが消えます。以下の設定が不要です。
{
test: /\.json$/,
loader: 'json'
}
fsモジュールの読み込みでエラーが出る
さらに Module not found: Error: Can't resolve 'fs' というエラーも出ます。これはビルド環境はNode.jsながら、対象がWebブラウザであるために発生するエラーです。このエラーを回避するために、Vue向けのNCMBを読み込みます。
$ npm install github:NCMBMania/ncmb_js#master --save
こちらではNode.js用のlocalStorageライブラリ読み込みをコメントアウトしてあります。
使い方
後は通常のNCMBライブラリと変わらず利用できます。
const NCMB = require('ncmb');
const config = require('./config');
const ncmb = new NCMB(config.applicationKey, config.clientKey);
JavaScriptはビルド環境が複雑になっており、様々な技術の組み合わせによって成り立っています。そのためエラーが出ると、どの部分で引っかかったのか、追いかけるのが難しくなります。Vue + Onsen UI2の環境（というよりもWebpack4環境かも知れません）のでNCMBを利用する際には上記の点に注意してください。
