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

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

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

• https://www.npmjs.org/package/browserify
• https://www.npmjs.org/package/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辺りのなにかを使うといいのかなーと思います。