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の投稿にまとめる。

Node.js

Node.jsやってみる。

macは、El Capitan 10.11.5です。

ここでNode.jsをダウンロードしたり、ドキュメントを取得できたりする。
http://nodejs.jp/nodejs.org_ja/
Node.js v0.11.11 マニュアル & ドキュメンテーション

Node.jsは、サーバ側の言語。Nginxとかを使わないらしい。

(引用:いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール (1/2)

これでWEBサーバ作ったことになる。Node.jsはWEBサーバで、nginx.confみたいなのが上記なんでしょうか??とりあえずやってみる。

~/nodejs/app.jsを作って、上記を書いた。その後、下記を実行。

おー表示された。

nodejs

モジュール管理は、npmでやる。
ビルドツールは、GruntとかGulpとかでやるんだけど、最近はちょっと嫌われているようで、使わないでやるケースも多いらしい。Gulpのがまだ人気あるらしい。

npmでgulpをグローバルインストールする

gulp用ディレクトリを作って、そこにgulpをインストールする

gulpfile.jsを作成してみる。

gulp実行

ファイルを追加したり、変更したり、削除したりすると、eventを検知して、event.path、event.typeとかが取得できる。これをもとにテストしたり、コンパイルしたりするんだろう。

ただ、上記コードだと、結構な頻度でエラーが出る。try-catchとかしっかりしたらOKになるのだろうか。

ここにあるコンテンツとドットインストールみたらいいかも。
「Node.jsでサーバサイドJavaScript開発入門」