ちょっとしたフロントエンド開発のセットアップ #JavaScript

最近だとGrunt使ったりgulp使ったり、またはGoogleのWeb Starter Kit使ったりしてセットアップすることが多いと思います。

ただ、何かを新しいフレームワークを試したりしたいだけのときにこれらの設定ファイルとか無駄に増えるのもイヤだなと思ったりしていて、最近はbrowserifyとbeefy使ってやっています。

各種変換とLiveReloadが出来れば十分なので。

例はこんな感じ。

https://github.com/koba04/react-boilerplate

設定ファイルがpackage.jsonだけになるのでシンプルです。

package.json

設定はこんな感じでしておくだけです。scriptの設定をしてnpm run dev|buildで操作出来るようにしておいて、browserifyのtransformのoptionを必要に応じて設定するだけです。

  "scripts": {
    "dev": "beefy src/index.jsx:bundle.js --live",
    "build": "browserify src/index.jsx > bundle.js"
  },
  "browserify": {
    "transform": [
      [ "reactify", { "es6": true }, { "everything": true } ],
      [ "stylify" ]
    ]

AltJSのCompile

例えばcofeescriptのcompileがしたいならcoffeeifyを使うなど、各種browserifyのtransformがあるのでそれを使えばいいだけです。
- https://github.com/koba04/vue-boilerplate/blob/master/package.json
- https://www.npmjs.org/package/coffeeify
reactのcompileなどもreactifyがあるのでそれを使えばいいだけですね
- https://github.com/koba04/react-boilerplate/blob/master/package.json
- https://www.npmjs.org/package/reactify

templateの読み込み

partialifyを使うことで可能になるのであとはrequireすればいいだけです。
- https://github.com/koba04/vue-boilerplate/blob/master/src/artist/index.coffee
- https://www.npmjs.org/package/partialify
```
module.exports = Vue.extend
  id: "artist"
  template: require './index.html'
```

CSS Preprocessor

Stylusであればstylifyがあるのでそれを使って、insert-cssと組み合わせるとよくて、componentに紐付けた感じにすることも出来ます。
- まぁhead要素にstyleが突っ込まれるだけなんですが..
- https://github.com/koba04/react-boilerplate/blob/master/src/component/artist.jsx
- https://www.npmjs.org/package/stylify
```
require('insert-css')(require('./artist.styl'));
```

LIveReload

beefyを使うことでbrowserifyの変換をやってくれるので、package.jsonにこんな感じで書いておいて、npm run devで起動するだけです。

{
  "scripts": {
    "dev": "beefy src/index.jsx:bundle.js --live"
  }
}

➜  npm run dev                                                                                                                                                                           
> react-boilerplate@0.1.0 dev /Users/koba04/git/react-boilerplate
> beefy src/index.jsx:bundle.js --live
beefy (v2.1.1) is listening on http://127.0.0.1:9966

Build

上記のだと実際にbundle.jsは生成しないので、別途buildコマンドを作って実行します。

{
  "scripts": {
    "build": "browserify src/index.jsx > bundle.js"
  }
}

➜  npm run build                                                                                                                                                                         
> react-boilerplate@0.1.0 build /Users/koba04/git/react-boilerplate
> browserify src/index.jsx > bundle.js

だた、まぁファイルが増えてきたりすると辛くなってくるかもなので、がっつりプロジェクトを開発するときはgulpとかgruntとかwebpack辺りのなにかを使うといいのかなーと思います。