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の実機で確認する

npmでパッケージ管理

参考:npmでnode.jsのpackageを管理する

npmパッケージ管理の初期化

-gは、グローバルインストール。

–save-devは、自動でpackage.jsonに追記される。
空白をあけてつなげると複数インストールできる。
-gをつけないと、プロジェクト毎にインストールされて、node_modulesフォルダに入る。

node_modulesはgitで管理する必要ない。npm installとすると、package.jsonに記載されている内容がインストールされる。

devDependenciesというのは開発時のみ利用するlibraryのversionを管理します。
libraryとして公開するようなprojectだと、–saveになります。

ということは、開発時のみ利用するライブラリを、npm i –save-dev hogeとやるということだろうか。本番時も使う場合は、npm i –saveということかな?babelとかreactとかは全部開発時しか使わないか。

npmはscriptというのもあって、コマンドが実行できるっぽい。
参考:npm script を試す (サンプル付き忘備録)

scriptを使って、webpackの代わりになるものを作る人も最近多いらしい。scriptの使い方は、package.jsonのscriptsに書いて、npm run buildとかやるらしい。試してみたけどエラーになった。-sをつけるとエラーがでなくなるらしい。

ちなみに、babelのドキュメントに、buildというスクリプトのサンプルがあって、下記のように書いてある。
babel src -d lib
これを実行したら、src doesn’t existといわれた。

babelのドキュメントに解説があった。
babelはbabelの投稿にまとめる。