Monacaをローカルでスムーズに開発するためのコマンドラインツール、Monaca CLIに新しいオプションの transpile が追加されました。transpileは各種コードの変換オプションになります。環境整備が面倒なAngular2/React開発をサポートします。

この記事ではtranspileオプションについて紹介します。

Monaca CLIのインストール

Monaca CLIを利用するにはNode.jsのインストールが必要です。インストール後、コマンドプロンプトやターミナルでnpmコマンド(Node.jsのパッケージ管理)を実行します。

利用場面について

transpile はコードの変換を行うオプションです。具体的には React や Angular2 などEcmaScript5で書かないプロジェクトに対して用いられます。

例えば React プロジェクトの場合、Monaca CLIを使うと次のように開始されます。最初に出てくるカテゴリで Onsen UI and React を選択して、その後で React を使ったテンプレートを選択します。

そして生成されたディレクトリを見ると、 src というディレクトリがあります。ここにReactアプリとしてのコードが入っています。

React アプリでよく見る jsx で書かれています。これらは EcmaScript5 に変換しなければMonacaアプリとして利用できません。そこで使うのが transpile になります。

transpile の使い方

以下のmonaca コマンドを実行すると、同時にtranspileが行われます。

  • monaca upload
  • monaca preview
  • monaca serve(monaca previewへのエイリアス)
  • monaca debug
  • monaca remote build

つまり、transpileを使うと言っても、monacaコマンドの中で自動的に実行されるので、普段の開発では特に意識する必要はありません。

なお、transpileは単独で実行もできます。以下は実行例です。Web FontやJavaScript、スタイルシートがコンパイルされます。

これらの生成されたファイルは www ディレクトリ以下に配置されます。つまり生成されたファイルがMonacaアプリになります。

www/index.htmlも生成されますが、これは次の通り簡単な内容で、生成されたJavaScript/CSSファイルを読み込んでいるだけです。

後はReactやAngular2アプリを作っていくだけでOKです。


transpile環境をgulpやWebPackで自作することもできますが、時間がかかってしまうでしょう。monacaコマンドを使えばすぐにReact/Angular2を使ったハイブリッドアプリ開発環境が整います。ぜひご利用ください。

※ Monaca CLIは、Proプラン以上で利用可能です。

Monaca CLI コマンド – Monaca Docs