LoginSignup
7

More than 5 years have passed since last update.

Reactのそれなりの開発環境をつくったときのメモ

Last updated at Posted at 2015-08-02

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7