React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide を Ubuntu Server 16.10 環境に Vagrant でセットアップするスクリプトを書いた

  • 28
    Like
  • 2
    Comment

成果物

https://github.com/ktrkmk/rrrmaebwea

詳しくはリポジトリ側の README.md も御覧ください。

http://www.b1ac1cc0ffee.cf/rrrmaebwea/

バックグラウンドについてつらつらと書きました。興味ある方はどうぞ。

きっかけ

Web アプリケーションにおけるバックエンド側をそれなりにやってきていましたが、とある日「10年のツケを支払ったフロント界隈におけるJavaScript開発環境(2016年4月現在)。」という記事を読み、フロントエンド界隈に少し興味を持ったのがきっかけになった感じです。

試そうとしたのはいいが…

早速その「React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide」を試してみようじゃないか、と思ったものの、これだけ色々並ぶと何がなにやら状態。そもそも一番最初に必要なのは何なんだ?!なに、node.jsだって?!みたいなところから環境構築をスタートする感じになりました。

Vagrantfile を作成

npm で react をインストールしたあたりで「せっかく開発環境を構築するのであれば Vagrantfile にしとこう、ついでにソースファイルなんかも自動生成するようにしとけばコマンドポチーでいけるっしょ」そういう感じに思いましたので、そういう感じにすることにしました。

GitHub へプッシュ

せっかく作ったので体裁を整えて GitHub にアップでもしてみるか、と思い GitHub をやりました。そういう感じです。

FAQ

なぜ package.json を使わないのか

package.json 自体は scripts/02_babel.sh で作成していますが、その後 package.json を利用せずモジュールをいちいちセットアップしているのは「それぞれのモジュールがどの設定ファイルに作用しているのかを、設定ファイルと1セットにしておきたかったから」です。例えば scripts/05_eslint-airbnb.sh では eslint をインストールした後に .eslintrc.json を作るところまで含めているようなかたちになっています。このような相互関係が分からないと「○○を変更したい場合どこを見ればいいのか」が分かりづらいだろうと考えたのが主な理由です。

最終的な package.json だけ欲しい場合は vagrant up が完了した後に /var/www/html/package.json を見て頂ければ良いかと思っています。ついでなので貼っておきます。

package.json
{
  "name": "html",
  "version": "1.0.0",
  "description": "",
  "main": "js/index.jsx",
  "dependencies": {},
  "devDependencies": {
    "axios": "^0.16.1",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-import-resolver-node": "^0.3.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^5.0.1",
    "eslint-plugin-react": "^7.0.0",
    "material-ui": "^0.18.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-redux": "^5.0.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.6.0",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
  },
  "scripts": {
    "build": "babel src -d lib",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

別にこのpackage.jsonが欲しくてこのVagrantfileを書いたわけではないという点は汲んで頂ければと思います。

奥付

リポジトリの方は fork や pull request など是非お好きな感じでご活用下さい。