Yeoman + AngularJS + RequireJS (+ Ionic)

これまでに書いたリサーチ系ポスト

環境構築メモ (1) Gulp
環境構築メモ (2) Grunt
環境構築メモ (3) RequireJS
環境構築メモ (4) Bower
フレームワーク習得メモ (1) AngularJS
フレームワーク習得メモ (2完) Ionic
環境構築メモ (5完) Yeoman

これらをまとめるクライマックスです。

これまでに、Gulp, Gruntで自己流ワークフローを確立し、今までキャッチアップしそびれていたツールとして、Require, Bower, AngularJS を勉強してきました。

そして、これらを一式、きちんと動くように束ねたものが、
soohei/yeoman-angular-coffee-requirejs-seed
です。

 

Yeomanで、
yo angular –minsafe –coffee
して出来るテンプレートをベースに、AngularJSをRequireJSから始動するように変更し。
distのビルドプロセスにも、RequireJSのOptimizerを追加しました。

Gruntの処理への主な変更箇所は、
wiredepを無効に
useminでJSをconcatするのを無効に
などです

また、RequireJSでOptimizeする時に、JS内の変数名を書き換えられてしまうと、Angularが動かなくなってしまうので、
mangle: false
にして、JS内の変数名を保護しています。

 

RequireJSの処理としては、

・angularは、exportの記述が必要
domready! を使う (!は意味がある)
・bower_compornents 内のコードを書き換えたくないので、一旦CDNは諦める。
※ optimizeでファイルを結合してしまうと、CDN読み込み前に、jQueryプラグインや、Angularの依存ファイルが読まれてしまい、エラーになる
※ jQuery依存のライブラリを一つ一つ、「define([‘jquery’], function($) { })」のように囲めば解決は出来る)
※ angular依存のライブラリを一つ一つ、「define([‘angular’], function(angular) {  })」のように囲めば解決は出来る)

となりました。

 

最後にIonicですが、

bower install ionic#1.0.0-beta.13 –save

して、


ionic: {
  exports: 'ionic'
}

ionicAngular: {
  deps: [
    'ionic'
    'angular'
    'angularAnimate'
    'angularSanitize'
    'uiRouter'
  ]
  exports: 'ionicAngular'
}


define [
  'angular'
  'ionic'
  'ionicAngular'
],

(angular) ->
  'use strict'
  return angular.module 'MyApp', ['ionic']

 

という感じで使えましたが、フレームワーク自体がバギーで、ドキュメント通りにやっても正しく動かないことがある。

具体的には、ion-nav-barが勝手にinvisibleになる。
http://stackoverflow.com/questions/27460173/ng-include-with-ion-nav-bar-not-displaying
http://forum.ionicframework.com/t/ionic-beta-1-0-0-navbar-not-show-on-screen/2346
http://forum.ionicframework.com/t/ionic-beta-1-0-0-navbar-not-show-on-screen/2346

ionicを読み込んだ時点で、ウィンドウのスクロールが無効になり、
スクロールの可否をIonicに委ねる羽目になる。

というあたりで思考停止して、部分的な利用は難しそうだと思いました。

Ionicのエキスパートがいたら教えてください。(連絡先: @soohei, http://td-inc.jp/contact)

環境構築メモ (3) RequireJS

RequireJSは、JSファイルの依存関係・実行順を、設定ファイル内に予め定義しておくことで、
html上のsourceタグでは先頭のJSファイル1つだけを読み込んで、
残りのJSファイルの非同期ロード・処理順をRequireJSに一任できるライブラリ。

これをワークフローに組み込んだものが、 soohei/grunt-requirejs-seed

今までからの変更点として、開発用のディレクトリをwwwとして、
デプロイ用のディレクトリはwww-buildを別に作るようにした。(www-buildはgitignoreしてある)
またjQueryはCDNからロードしたり、自分が書くコードはRequireJS関係も含め、
全てsource/coffee内でCoffeeScriptで書けるようにした。

この www-build の書き出しは、デプロイ時の処理の中に新たに導入した、RequireJS Optimizer が行う。
(toolsディレクトリの中、Gruntのタスク名は、 exec:build )

また、Optimizerの設定に、”removeCombined”: true を追記することで、
結合に使ったファイルをビルド先にコピーしないようにしたり、
(参考: Do not copy source file when optimizing using requirejs – Stack Overflow)
前回紹介した、Gruntでのugilify時のオプション preserveComments: ‘some’ も採用してます。

それとRequireJSの書き方の話で、requireとdefineの違いについては、
「javascript – RequireJs – Define vs Require – Stack Overflow」 に書かれているベストアンサーが的確。

そもそものRequireJSの理解は、bouzeの 「Require.jsを試してみた | blog.bouze.me」 に超救われた。

最後に、gruntのコマンドなどを整理すると、
人間が作業するのはwww/source以下。Gulpが頑張るのがwww/assets以下。
デプロイに使うのは、www-buildに残ったファイル一式
普段は、grunt
デプロイ前に、grunt -dist
www-buildをルートにしてサーバーを立てて、動作チェックをするとは、 grunt prod-serve

次回は、JSのライブラリの管理をする「パッケージマネージャー」、Bowerです。