きょうぷろぐらみんぐをはじめたました！(大嘘)
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
以上です。