きょうぷろぐらみんぐをはじめたました！(大嘘)

webpackあたりまだ良くわかっていない人です。

今回、express-generarotを使って環境？を作ったときに知ったこととかをメモしていく。
メモだよ。
必要があればコメントでメモ修正していただけるとありがたき幸せ。

express-generatorの巻

expressで環境を構築するときにexpress-generatorというものを使うと構造をぱぱっと作ってくれる。
そのために

npm install express-generator -g

をする。-gでいれるよ。グローバルインストールするのが重要。たぶん。

あとは

express hoge

でサクッと構造を作る。

色々オプションつけられるよ。

express --view pug --css sass hoge

みたな。
--view pugとかはexpress -hに書いてあるから見てね。

(ちょっと脱線)package.jsonの巻

これまでテキトーに
npm installみたいなのをしていたが、ESlintとかそういうのを導入しているときにnpm install -Dみたいなことを書いているサイトがあったから気になって調べてみた。

そしたら、実は開発用のパッケージとアプリの動作用のパッケージで記述される場所が違ったらしい。ほぇ〜。

下のを読んだ。
参考：https://qiita.com/chihiro/items/ca1529f9b3d016af53ec

アプリの動作に必要なものはdependencies

npm install --save hoge

開発に必要なものはdevDependencies

npm install --save-dev hoge

としていれるんだと。

で実際にpackage.jsonを使ってパッケージ入れるときは

package.jsonに書かれているすべてのパッケージをインストールする

npm install

package.jsonのdependenciesに書かれているパッケージのみインストールする

npm install --production

だから、開発に必要なパッケージは

npm install --save-dev eslint

で書かなくちゃいけないんだな。
ESlintとかはそうだね。

ちなみにnpm 5.0.0以降は--saveはつけなくてOK。

npm v5以降↓↓

参考：https://docs.npmjs.com/cli/install

アプリの動作に必要なものはdependencies

npm install hoge

開発に必要なものはdevDependencies

npm install -D hoge

ESLintの巻

ESLintってのを入れると、書いているコードを既存のルールに当てはめて勝手にきれいにしてくれるのでめちゃくちゃおすすめ。
当然入れる。

ESLintのは開発でしか使わないので

npm install -D eslint

これでESLintを使える。
初期設定は
eslint --initなんだけど、グローバルインストールしていないから

 ./node_modules/.bin/eslint --init

でESlintの初期設定を行う。
いろいろ選べば勝手に.eslintrc.jsonみたいなのを作ってくれる。

? How would you like to use ESLint? (Use arrow keys)
  To check syntax only 
❯ To check syntax and find problems 
  To check syntax, find problems, and enforce code style

上みたい感じなのが出てくるからいい感じに選んでくれ。

nodemonの巻

コードを更新するたびにCtrl + cするのがだるいのでnodemonを使う。
これは開発するときだけ使うので

npm install -D nodemon

だね。

さて、package.jsonのscriptを変更する必要があります。

  "scripts": {
    "start": "node ./bin/www"
  },

こうなっていると思うから

  "scripts": {
    "start": "nodemon ./bin/www"
  },

とします。

これでコード編集されると自動で監視してくれるようになるよ。わーい。

以上？

やったのはこんだけ。
あとは普通にexpress通りに作った。

調べてたらES6を使うためにbabelを入れようみたいな記事があったが、上の設定だけでアロー関数使えたよ。よくわからん。
だれか教えてTT

以上です。