2018-10-04に更新

もう絶対にやめられない。ホットリロード開発環境を手に入れる。

ホットリロードとは?

ローカル開発環境(http://localost:8080/)でフロント側の開発しているとき、僕は今まで ①ファイル編集 → ②保存 → ③ブラウザでcommand + R...を繰り返し確認していました。

が、ホットリロードを取り入れると、①ファイル編集 → ②保存した瞬間に、編集したファイルを読み直してストレスなく開発を進めることができます(最近知りました...orz)。これは知っているのと、知っていないのでは開発のスピードが全然違ってくるので、一度試してみる価値はあるかもしれません...。

とても簡単に構築することができるのでぜひ試してみて下さい。

ホットリロードの環境構築

ホットリロードにはvueのcliでもなく、React Hot Loaderでもなく、npmの『live-server』というプラグインを使います(おそらくこれが一番簡単)

※npmコマンドは事実行できる環境にしておいてください

以下のコマンドをターミナルで実行します。

$ npm install -g live-server

$ cd <開発のディレクトリ>

$ live-server .

確認

http://127.0.0.1:8080/

or

http://localost:8080/ 

このコマンドででホットリロードで開発できるローカル開発環境が手に入るので、ぜひ試してみてください!


フジワラ@CLOCK

Webのお仕事 /ランナー / キーボードを叩くだけのお仕事をしています。何とかCLOCKとかいうサービスを複数作っています。大分生・東京住 → https://t.co/sY02fsMtWr

Crieitはαバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

コメント