Riot.jsを使用した開発環境の構築に関してのメモ
はじめに
Riot.jsのv3.0.0の安定版がリリースされましたね。
メジャーバージョン上がっちゃったよ。。。
フロント界隈はメジャーバージョンアップが早くてちょっとビビる(本職はフロントエンドではないので)
Riot.jsを使用した開発環境の構築に関して、考えていることをちょっとメモしときます。
なので今回のエントリーは読まれることを意識せずつらつら書きます
目次
ビルドツール・開発言語
- Gulpなどの タスクランナーは使わない 。
- npm runコマンドで実行する。
- メンテナンスとか考えたらGulpみたいな抽象レイヤー要らないよねってなった。
- 細かい設定必要なったら別途JSファイル作ってそこで設定する(それをnpm runコマンドで呼び出す)。
- JavaScriptは ECMAScript2015 で。
- ブラウザの対応待ちとかしたくないので、 babel などのトランスパイラ使う。
- CSSは SCSS を使う。
- CSSの構成は FLOCSS を導入。
検討中
- HTMLは EJS を使う？
- Riot.js使うなら要らないんじゃないか疑惑(Riot.js使う前はEJS使ってたけど)。
- Webpackどうしよう。
- 今考えているアウトプットと思想が違う気がする
ディレクトリ構成
Riot.jsを使用した場合のアウトプットの具体的なイメージできてないので 保留 。
JavaScript
- Class単位でファイル分ける。
- JSファイルはモジュールインポートで、ページを表示するのに必要なものだけを1ファイルにまとめる。
- index.html/second.htmlというように2ページに別れる場合、index.js/second.jsという2ファイルを作成する。
- JSファイルのアウトプットファイル名はHTMLファイル名と同じにする(自動化)。
- ESLintでチェック。
- 単体テストやる。
- safixに Spec.js を付ける。
- ライブラリはビルドしない。
- ライブラリ系はそのまま読み込む。
- アウトプットに関して
- 本番はminifyする。
- RCはminifyしてsourcemap付ける。
- 開発はminifyしないでsourcemap付ける。ヘッダーも付けようかな。
- ファイルにHash付ける。
CSS
- 1ページ1cssファイル。
- csslint付ける。
- アウトプットに関して
- 本番はminifyする。
- RCはminifyしてsourcemap付ける。
- 開発はminifyしないでsourcemap付ける。ヘッダーも付けようかな。
- mqpacker/autoprefixer/remの変換とかする。
HTML
- htmllint付ける。
- アウトプットに関して
- 本番はminifyする。
- RCはminifyする。
- 開発はminifyしない。
その他
- watchしながら開発できるようにする。
- browser-sync使う？
- LOCAL/DEV/STG/RC/PRODUCTION環境で切り分けられるようにする。
- 良い感じのSPAサイト作れる構成にしたいよね。
まとめ
なにもまとまってません。
特にRiot.jsを使ってSPAサイトを構築するうえでのアウトプット形式どうしようホント。
