FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

AngularプロジェクトにNCMBを追加する

f:id:mbaasdevrel:20210304154136p:plain

AngularやReact、VueといったモダンなフレームワークでNCMBを利用する場合、WebPack周りでエラーが出ることがあります。そんな時の対処法を紹介します。

解決策

先に解決策を紹介します。それはNCMBのJavaScript SDKをフォークした、こちらのライブラリを利用することです。

npm install github:NCMBMania/ncmb_js#master

このJavaScript SDKは3.1.1(2021年03月時点の最新版)をベースとしています。公式とは次の点が異なります。

  • Node.js用のLocalStorageを除外しています
  • Babelを開発用の依存ライブラリに変更しています
  • レガシーなWebブラウザをサポートする Babel Polyfill も開発用の依存ライブラリへ変更、コードから除外しています

次に webpack.config.js を開いて、下記を修正します。

// 元
{
  test: /\.json$/,
  loader: 'json-loader',
}

// 修正後
{
  test: /\.json$/,
  loader: 'json-loader',
  type: 'javascript/auto'
}

後は import で利用できます。

import * as NCMB from 'ncmb';
const ncmb = new NCMB('YOUR_APPLICATION_KEY', 'YOUR_CLIENT_KEY');

問題

通常のJavaScript SDKをインストールして利用しようとすると、次のエラーが発生します。

ERROR in ./node_modules/node-localstorage/LocalStorage.js
Module not found: Error: Can't resolve 'fs' in

これはWebPackで事前にコードのトランスパイルが走った際に、Node.js側のコード(node-localstorage)が問題になっています。Webブラウザ上で実行する限りは不要なのですが、読み込みが発生してしまっています。

そこで、フォークしたライブラリではこのコードを除外しています。

注意点

Babelを除外していますので、レガシーなWebブラウザでは動作しない可能性があります。なお、Monacaアプリの場合はモダンなWebブラウザのレンダリングエンジンを利用していますので、問題はないでしょう。

まとめ

公式のJavaScript SDKはTypeScriptで作られていませんので、コード補完などは利用できません。もしTypeScriptで利用したい場合には ncmb_ts - npm をご利用ください。AngularやReact、VueでもぜひNCMBを役立ててください!

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。