EC-CUBEにJSHintを導入してJavaScriptの品質も上げようとしてみる

EC-CUBEにテストを導入する(ほぼ)1人プロジェクト
JSHintを導入してJavaScriptのおかしな部分も検知できるようにしたい

JSHintをインストール

何はともあれJSHintをまずはローカルに入れてみましょう

今どきnpmをインストールしてないなんてって言われそうですが入れてないのでそこからスタートです。。
あとbashですみません、zshをいちいち入れるのがめんどくさいんです。。

npmをhomebrewでインストール

homebrewの場合node.jsをインストールすれば標準でついてくるそうです

ファンがブンブンいっていましたが入りました。
改めてJSHintをインストールします

なんだかいっぱい入りました
動くのか動作を確認してみます

動くみたいです、試しにeccube.jsを実行してみます

51個もエラーが検出されましたが最終行はToo many errorsってなってますね(^_^;)
is better written in dot notationについてはJSLintオプション考察「inefficient subscripting」|もっこりJavaScript|ANALOGIC(アナロジック)に詳しく書いてあるので後で試しましょう

Travis CIでJSHintを実行する

Travis CIで実行するにはGruntを使う必要があるみたい??
ということみたいなのでまずはローカルにGruntを・・・

Gruntのインストール

ここからはプロジェクト単位でインストールするようなのでpackage.jsonを作る必要があるらしい(よくわかってない)
package.jsonは手で作ってもいいみたいだけどnpm initすればちゃんとしたものを作ってくれるっぽい

さてGruntを入れましょう
–save-devをつけると勝手にpackage.jsonに書き込んでくれるみたいです

grunt-contrib-jshintというGruntがJSHintを実行するのに必要なものも入れましょう

さらにGruntfile.jsというプロジェクトをビルドする際のタスクの設定・振舞いを記載するファイルを作らないといけません
これは自動で作ってくれる機能がないようなので?手で作ります

さてGruntを実行してみましょう。。

実行できたようです。
EC-CUBE固有のjsもGruntfile.jsに追加してみます

実行してみて動いているようなのでとりあえずこれでいいのかな?

Travis CIに対応させる

やっと本題にたどり着いた感じです。。。
さてEC-CUBEはすでにPHP用の.travis.ymlを作ってあるのでこれに追記してJSHintも実行させてみます

.travis.ymlにnpm installなどを追加

6パターンをテストしているのに、そこに追加するしかないというのがちょっと残念ですがlanguageは増やせないみたいなのでしょうがない。。

あとはpackege.jsonも修正します

これでpushすれば・・・
Travis CI – Free Hosted Continuous Integration Platform for the Open Source Community

出来ました!
ただこれだとテストが落ちていることになっちゃうのが難点ですねぇ・・
なにか良い方法があれば教えて欲しいです

参考サイト

JSHint Options Reference
GRUNT とJSHintのコードチェックをビルドプロセスに組み込む – Gaishimo
かずぽんブログ • GruntをスクラッチなJavascriptプロジェクトに導入する

スポンサーリンク

シェアする

フォローする

コメントを残す

トップへ戻る