自分用Reactひな形プロジェクトのプロジェクト構造を見直し

先日、Reactの勉強用に作ったプロジェクトのひな形（ umi-uyura/my-react-boilerplate ）ですが、プロジェクトの構造を変更することにしました。

umi-uyura.hatenablog.com

気になってきたところ

当初の構造は以下のような感じでした。

.
├── README.md
├── build
├── html-minifier.conf
├── index.html
├── package.json
├── src
│   └── app.jsx
└── style
    └── app.css

使ってみて気になってきたのは、 index.html がプロジェクトルートにあることや、HTML minifier用の設定ファイルを置いたことにより、ソースと設定がごっちゃになってきた感じがしてきた点。

また、現状それほど分量がないHTMLやCSSは素で書いていますが、いずれJadeやStylusなどで書きたくなるかもしれないし、そういった際に似たような設定ファイルやフォルダが増えてしまう可能性を考えると、今のうちに整理しておいた方が良いと思い、見なおしてみることにしました。

変更後の構成

他の方のプロジェクトなども見てみたものの、何が正解というものもなさそうなので、色々と参考にさせていただきつつ、今の時点の自分用としては、以下のようなフォルダ構成にすることにしました。

.
├── README.md
├── app
│   ├── css
│   ├── index.html
│   └── js
├── dist
├── html-minifier.conf
├── node_modules
├── package.json
└── src
    └── jsx

主要なフォルダの役割は、以下のような考え。

フォルダ	役割
src	変換元のソースを格納（JSX、Jade？、Stylus？など）
app	アプリ本体を格納（HTML、JavaScript、CSS）
dist	配布用リソースを格納（MinifyしたHTML、JavaScript、CSS）

開発時の流れとしては、 src 内で開発したものを変換して app へ生成し、最終的にリリースする際に dist へ一式出力する、というものをイメージ。

それに合わせて、 npm run-scripts の設定も変更。

package.json

{
  ...
  "scripts": {
    "babelify": "browserify -t babelify src/jsx/app.jsx -o app/js/bundle.js",
    "watchify": "watchify -t babelify src/jsx/app.jsx -o app/js/bundle.js -v",
    "beefy": "beefy src/jsx/app.jsx:js/bundle.js --live --open --cwd app -- -t babelify",
    "licensify": "browserify -t babelify src/jsx/app.jsx -p licensify -o app/js/bundle.js",
    "prebuild": "mkdir -p dist/js && mkdir -p dist/css",
    "minify:html": "html-minifier -c html-minifier.conf app/index.html -o dist/index.html",
    "minify:js": "uglifyjs app/js/bundle.js -o dist/js/bundle.js --comments '/generated by licensify/'",
    "minify:css": "cleancss -o dist/css/app.css app/css/app.css",
    "build": "npm run prebuild && npm run licensify && npm run minify:html && npm run minify:js && npm run minify:css",
    "clean": "rm -rf dist/*",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

今の時点では、事前の変換処理が必要なのはReact(JSX)だけなので、通常は npm run beefy で自動リロードしながら開発しつつ、単独で出力したい場合は npm run babelify で bundle.js を app/js フォルダへ生成すれば、 app/index.html を開いて動作確認できます。

配布形式へは、

• npm run prebuild で、 dist 内に必要なフォルダを作成
• npm run licensify でライセンスコメントを抽出しつつJSXをJavaScriptへ変換し、 npm run minify:js でライセンスコメントを残しつつMinifyしたものを dist へ出力
• npm run minify:html と npm run minify:css で、HTMLとCSSをMinifyしたものを dist へ出力

のようなことを、一括で npm run build で実行するようにしてみました。

引き続き、他の人のプロジェクトなどを参考にしつつ、最適化していきたい。

入門 React ―コンポーネントベースのWebフロントエンド開発