cordova + onsen ui + reactの開発環境

cordova + onsen ui + reactの開発環境を作成してみます。cordovaのテンプレートにして、メンテしていければと思います。環境は、windows10、npm3.10.8です。エディタは、visual studio code1.6.1を使ってます。

プロジェクトを作る

npmはインストール済みです。

必要なものをnpm install

下記のpackage.jsonを配置して、npm installを実行。

git

.gitignoreを編集

cordovaにプラットフォーム追加

babelの設定

.babelrcを編集

eslintの設定

.eslintrcの編集

.eslintignoreの設定

webpackの設定

元となるjsを入れるフォルダを作る

webpack.config.jsの編集

index.htmlの作成

www/index.html

Javascriptの作成

onsen ui + reactを使った簡単なjavascriptを作成してみる。

src/App.jsx

src/main.jsx

webpackする

webpackすると、www内に、assetsと、bundle.jsと、main.cssが出力される。

webpack-dev-serverを使う

webpack-dev-serverを使っていると、ウォッチしてくれて、対象ファイルに変更があると、webpackしなおして表示してくれる。
webpackした結果は、メモリに保存されるので、www内への展開はされない。

screen

Androidの実機で確認する

babel

babel

babel-cliは、コマンドラインで使えるやつらしい。

es2015に変換するには、babel-preset-es2015が必要らしい。

さらに、.babelrcというファイルに、presetを記載する必要があるらしい。

下記を実行したら、es2015に変換された。

react用のやつもためしてみる。
reactのjdx使っているコードかいて$babel hoge.jsとやっても今はエラーになる。
.babelrcのpresetsにreactを追加して、下記を実行すると変換できた。

babelのドキュメントに色々使い方が書いてある。

出力ファイルを指定できるらしい。

npmのscriptで実行できるか試してみる。
package.jsonに下記のbabelを追加する。

下記で、babelを実行したらできた。–out-fileは、-oでもいいらしい。

あと、ウォッチもできるらしい。–watchだけど、-wでもいいらしい。

おー便利だ。

ソースマップというのも出力できるらしい。
参考:Babelで始める!モダンJavaScript開発

SourceMapを使うことで変換前のコードと変換後のコードを対応付けることができるため、実行時に問題が発生しても元のソース上でどこに問題があったのかを容易に把握することができます。

BabelのsourceMapsオプションはソースコードと同時にsourceMapファイルを出力することができ、trueを指定した場合変換後のソースとは別にsourceMapファイルを、”inline”を指定した場合変換後のソースファイルにsourceMapファイルを埋め込んで出力できます。

デバッグしたりするときに便利なんでしょうか。とりあえず出力してみる。

script.js.mapというのが出力された。jsファイル毎に元になるファイルを教えてくれるやつらしい。

–out-dirというのはコンパイルしてくれるらしい。-dでもいいらしい。

これは、src内のjsファイルをすべて変換して、libに出力してくれる。ファイル名は同じ。

–out-fileは、ディレクトリ内のjsファイルを一つのファイルに出力してくれる。