Monacaをローカルでスムーズに開発するためのコマンドラインツール、Monaca CLIに新しいオプションの transpile が追加されました。transpileは各種コードの変換オプションになります。環境整備が面倒なAngular2/React開発をサポートします。
この記事ではtranspileオプションについて紹介します。
Monaca CLIのインストール
Monaca CLIを利用するにはNode.jsのインストールが必要です。インストール後、コマンドプロンプトやターミナルでnpmコマンド（Node.jsのパッケージ管理）を実行します。
$ npm install monaca -g
利用場面について
transpile はコードの変換を行うオプションです。具体的には React や Angular2 などEcmaScript5で書かないプロジェクトに対して用いられます。
例えば React プロジェクトの場合、Monaca CLIを使うと次のように開始されます。最初に出てくるカテゴリで Onsen UI and React を選択して、その後で React を使ったテンプレートを選択します。
$ monaca create react_monaca
? Choose a category:
Onsen UI
Onsen UI and Angular 1
Onsen UI and Angular 2
❯ Onsen UI and React
Ionic
No Framework
Sample Apps
そして生成されたディレクトリを見ると、 src というディレクトリがあります。ここにReactアプリとしてのコードが入っています。
$ tree src/
src/
├── App.jsx
├── HomePage.jsx
├── SettingsPage.jsx
├── main.jsx
└── public
└── index.ejs
1 directory, 5 files
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、スタイルシートがコンパイルされます。
$ monaca transpile
Running Transpiler...
Build completed in 13.312s
Time: 13314ms
Asset Size Chunks Chunk Names
assets/ionicons.aff28a207631f39ee0272d5cdde43ee7.svg 334 kB [emitted]
assets/fontawesome-webfont.25a32416abee198dd821b0b17a198a8f.eot 76.5 kB [emitted]
assets/fontawesome-webfont.c8ddf1e5e5bf3682bc7bebf30f394148.woff 90.4 kB [emitted]
assets/fontawesome-webfont.1dc35d25e61d819a9c357074014867ab.ttf 153 kB [emitted]
assets/fontawesome-webfont.d7c639084f684d66a1bc66855d193ed8.svg 392 kB [emitted]
assets/ionicons.19e65b89cee273a249fba4c09b951b74.eot 121 kB [emitted]
assets/ionicons.dd4781d1acc57ba4c4808d1b44301201.ttf 189 kB [emitted]
assets/ionicons.2c159d0d05473040b53ec79df8797d32.woff 67.9 kB [emitted]
assets/fontawesome-webfont.e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 71.9 kB [emitted]
assets/Material-Design-Iconic-Font.a4d31128b633bc0b1cc1f18a34fb3851.woff2 38.4 kB [emitted]
assets/Material-Design-Iconic-Font.d2a55d331bdd1a7ea97a8a1fbb3c569c.woff 50.3 kB [emitted]
assets/Material-Design-Iconic-Font.b351bd62abcd96e924d9f44a3da169a7.ttf 99.2 kB [emitted]
app.bundle.js 88.1 kB 0 [emitted] app
vendor.bundle.js 454 kB 1 [emitted] vendor
app.css 126 kB 0 [emitted] app
index.html 620 bytes [emitted]
Transpiling finished for /path_to/react_monaca
これらの生成されたファイルは www ディレクトリ以下に配置されます。つまり生成されたファイルがMonacaアプリになります。
www/index.htmlも生成されますが、これは次の通り簡単な内容で、生成されたJavaScript/CSSファイルを読み込んでいるだけです。
$ cat www/index.html
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv=Content-Security-Policy content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script type=text/javascript src=components/loader.js></script> <link rel=stylesheet type=text/css href=components/loader.css> <link href=app.css rel=stylesheet></head> <body> <div id=app></div> <script type=text/javascript src=vendor.bundle.js></script><script type=text/javascript src=app.bundle.js></script></body> </html>
後はReactやAngular2アプリを作っていくだけでOKです。
transpile環境をgulpやWebPackで自作することもできますが、時間がかかってしまうでしょう。monacaコマンドを使えばすぐにReact/Angular2を使ったハイブリッドアプリ開発環境が整います。ぜひご利用ください。
※ Monaca CLIは、Proプラン以上で利用可能です。