Reactを始めようと思ったので、それなりの開発環境をつくってみた。
フロントエンドのちゃんとした環境を作るのは初めてなのでメモしておく。
プロジェクトのフォルダ構成はこんな感じ。
project
├── build
├── dest
│ ├── app.js
│ └── app.min.js
├── node_modules
├── package.json
├── src
│ └── app.jsx
└── index.html
npmでパッケージをインストール
# package.jsonを作成
$ npm init
$ npm install --save-dev browserify reactify react uglify-js watch
package.jsonの設定(jsxのビルド設定)
npm initコマンドで作成した、package.jsonの設定。
browserifyのtransformでreactifyを指定して、Reactのソースを変換している。
package.json
{
"name": "project",
"version": "1.0.0",
"description": "",
"devDependencies": {
"browserify": "^11.0.1",
"react": "^0.13.3",
"reactify": "^1.1.1",
"watch": "^0.16.0"
},
"scripts": {
"build": "browserify --debug src/app.jsx > dest/app.js",
"build-dist": "NODE_ENV=production browserify src/app.jsx | uglifyjs -m > dest/app.min.js"
},
"browserify": {
"transform": [ "reactify" ]
}
}
src配下のapp.jsxをビルドするとき。
# dest配下にビルドされた、app.jsが生成される。
$ npm run build
production用とかでビルドするとき。
browserify + npmでReactを使う場合はNODE_ENVを設定するとよいらしい。
# best配下に圧縮された状態の、app.min.jsが生成される。
$ npm run build-dist
ビルドされたjsファイルをhtmlに指定してあげればブラウザ上で動くようになる。
index.html
<html>
<meta content="text/html" charset="UTF-8">
<head>
<script src="fb.me/react-0.13.3.js"></script>
</head>
<body>
<div id="app-container"></div>
<script src="dest/app.js"></script>
</body>
</html>
ファイルを監視して、変更された際に自動でビルドが走るようにする。
gulpとかgruntとか使おうと思ったが、大したことやりたいわけではないので、とりあえずnpmのwatchで乗り過ごそうと思う(いっぱいあってよくわからんくなってしまった)。
ビルドツールまとめ。Gruntとかgulpとか (フロント寄り)
Grunt/Gulpで憔悴したおっさんの話
package.jsonのスクリプトにwatchの記述を追加する。
package.json
...
"scripts": {
...
"watch": "watch 'npm run build && npm run build-dist' src"
},
...
以下のコマンドを実行するとsrc配下のファイルの変更を監視して、変更があったらビルドを実行してくれる。
# src配下の監視を実行
$ npm run watch