40
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

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

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

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

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

例はこんな感じ。

設定ファイルが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

templateの読み込み

CSS Preprocessor

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辺りのなにかを使うといいのかなーと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
40
Help us understand the problem. What are the problem?