インストール
- homebrew を入れる。
- nodebrew を入れる。
- node を入れる。
- npm を update する。
- express を入れる。
- express-generator を入れる (必要なら)。
参考
homebrew
下記を参照のこと。
- https://brew.sh/index_ja
2020/4 時点では、ターミナルで下記コマンドでインストールできる。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
nodebrew
古い node, yarn, npm が入っているかもしれないので、削除してからインストールする。
$ brew uninstall yarn
$ brew uninstall node
$ npm uninstall npm -g
nodebrew 本体をインストール。
$ brew install nodebrew
bash なら ~/.bash_profile に、zsh なら ~/.zhenv にパスを追加し、nodebrew の setup をする。
$ echco 'PATH=$PATH:$HOME/.nodebrew/current/bin' >> ~/.bach_profile
$ source ~/.bash_profile
$ nodebrew setup
node をインストールする。
インストールできる nodeのバージョンを確認してから、インストールしたいバージョンの nodeをインストールする。たとえば v14.1.0なら、
$ nodebrew ls_remote
$ nodebrew install v14.1.0
$ nodebrew use v14.1.0
とする。install nodebrew, node and yarnには installでなく install-binaryでないと遅いとあるけど、nodebrew 8.9.4では少なくともインストールはすぐ終わった。
インストールされているバージョンを確認するのは lsオプション。バージョンを変更するのは useでやる。v12.16.2 (LTS) に変更するには、
$ nodebrew use v12.16.2
とする。これでバージョンが切りかわらない場合は、古い node や npm が入ったままの可能性がある。npm, node, nodebrew, yarn をすべて uninstall して最初からやりなおし(怒)。
npm の update
$ npm install npm -g
yarn のインストール
yarn を homebrew で普通にインストールすると、node の最新版がいっしょにインストールされてしまってめちゃくちゃになる。で、install nodebrew, node and yarnにあるように homebrew で依存関係を無視してインストールしようとすると、
$ brew install yarn --ignore-dependencies
mac 10.15.4 では Error: No available formula with the name "–ignore-dependenciesとか言われてしまう。これはダメだな…。とりあえず今回は npmでインストールした。
$ npm install yarn -g
これで、特に問題なく yarnは使えるようになった。
express のインストール
express 自体は下記のコマンドでインストールできる。
$ cd ~/workspace/
$ mkdir project_dir
$ cd project_dir
$ yarn add express
express コマンドは、express-generator をインストールしないと使えない。これは結構な罠。
$ yarn add global express-generator
これで express コマンドが使えるようになる。
$ cd ~/workspace
$ express project_dir --view=pug
--view=pugを付けないとテンプレートエンジンが jadeになります。ただし、jadeは将来的にデフォルトではなくなるから --view=pugオプションをつけたほうがいいよ、というワーニングが出ます。jade は pugという名前に改名されただけのもので基本的に同じなので、2020.4 現在は --view=pugを付けたほうが良さそう。
express-generatorは生成時に一度しか使わないので、global にインストールしなくてもいい。たとえば。
$ cd ~/workspace
$ mkdir express_gen
$ cd express_gen
$ yarn add express-generator --view=pug
$ node_module/.bin/express ../project_dir
$ cd ../project_dir
$ rm -rf .//express_gen
こんな感じで、ローカルにインストールしたあとに、アプリの雛形を生成したら削除しても問題ない。
アプリの実行
$ express project_dir --view=pug
で project_dir には下記のファイルが作成される。
project_dir
├── app.js # アプリのメインファイル├── bin
│ └── www # yarn start 時に node bin/www として実行されるファイル├── package.json # ライブラリ等の依存関係やバージョン情報を格納したファイル├── public # static なファイルを置くフォルダ│ ├── images # http://localhost:8000/images │ ├── javascripts # http://localhost:8000/javascripts │ └── stylesheets # http://localhost:8000/stylesheets│ └── style.css # http://localhost:8000/stylesheets/style.css├── routes # router (ミドルウェア) 置き場│ ├── index.js # http://localhost:8000/ (トップページ)│ └── users.js # http://localhost:8000/users└── views # テンプレートファイル置き場├── error.pug # エラー時のテンプレート├── index.pug # index.js 用のテンプレート└── layout.pug # index.pug や error.pug に読みこまれるテンプレート作成されたら、下記コマンドを最初に実行しておく。これで package.json に書かれているパッケージがインストールされる。
$ yarn install
実行は下記コマンド。ポートを指定しないとデフォルトでは 3000 になっている(はず)。
$ PORT=8000 yarn start
ブラウザで http://localhost:8000を開く。
こんな画面が出たら成功している。
$ PORT=8000 yarn start
微修正
git に push するときは、https://gitignore.ioなどで node 用の .gitignoreを作って置く。自作するなら .gitignoreには npm_modulesディレクトリと yarn-error.logを最低限入れておく。
余談
express-generator 4.16.1で generate したアプリを github に置こうとすると、yarn.lock内の clean-cssのバージョンが低くてセキュリティ上問題があると言われる。アプリ内で実際に clean-cssを使っていなければ問題ないはずだけど、どうしても消したいなら次のようにすれば消せる。
package.jsonの dependenciesの中に下記の行を追加する。
"clean-css":"~4.1.11",このあと yarn installすると、yarn.lockが更新されて github に置いても警告が出なくなる。
つづく?