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

webpack + eslint

webpackでeslintを使う場合、eslintとは別に、eslint-loaderをインストールする必要があります。

インストール

そして、webpack、eslintそれぞれの設定ファイルを作成します。

webpackの設定

下記のように、webpack.config.jsを設定します。
moduleのpreLoadersにeslint-loaderの設定を書きます。moduleは、eslint-loader等の-loaderを省略できます。あと、下の方にあるeslintというところで、eslintの設定ファイルを指定します。eslintrc.jsonとか、.eslintrcというファイル名であれば指定は不要かもです。

eslintの設定

eslintのルールは沢山あって自分でルールを使うかどうか決められますが、AirBnBのルールが人気だし、そういうところに合わせておいて悪いことはないと思うので、基本AirBnBを使います。ただ、Reactとbabelを使っているときに沢山エラーがでたので、ちょっと修正しました。AirBnBのルールを使いつつ、このエラーは出なくてもいいやと思ったら、ルールを無効にして調整してます。まだ、使いだしたばかりなので、単なる一例です。

.eslintrc

jsx拡張子に関するルール

reactはjsxを使いますが、jsxを使っているファイルの拡張子はjsxにしないと、AirBnBルールに怒られます。jsxを使っていないファイルはjsのままだと思うので、拡張子がjsとjsx共に、webpackがjavascriptに対して実行する処理を適用させるようにしてみます。

該当ファイルの拡張子をjsxに変更し、webpack.config.jsを下記のように修正します。

eslint

ESLint

参考:ESLint 最初の一歩

ESLint は JavaScript のための静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint, JSHint 等があります。

インストール

package.jsonの設定

グローバルインストールでないので、npmから実行できるようにします。
package.jsonのscriptsを下記のようにします。

初期化(設定ファイルの作成)

eslint –initで対話的に設定ファイルが作成できます。グローバルインストールでないので、eslint –initというコマンドがそのままは使えない為、上記で設定したnpmのscriptsを使います。設定ファイルの作成が終わったら、上記のlint-initは不要です。

色々聞かれたので、popularのAirBnBのjsonにとりあえずしてみました。設定ファイル、.eslintrc.jsonが出力されます。
.eslintrc.jsonの中身

jsファイルを適当に作ってみる

hoge.js

使ってみる

使えました。下記が表示されました。

おー厳しい。

どんなルール設定にしたら最適なのでしょうか?
とりあえずAirbnbに合わせることはいいことだとは思いますが。あと、改行文字とか、ブロックの前にスペース空けるとかは、自動整形とかあると便利なのですが、あるのでしょうか?

結構Airbnbは人気みたい。
visual studio codeでは、Shift+Alt+Fで自動整形できる。拡張機能にeslintもあるし、eslintの設定は、eslintrc.jsonを読んでくれる。eslintはデフォルトで、node_modulesの中はみないとどこかに書いてあったんだけど、visual studio codeのeslint拡張は見ちゃうみたい。.eslintignoreで設定したら消えた。改行文字もvisual studio codeの設定変更した。これでエラー消えた。