手元の HTML / CSS / JavaScript をサクッと確認するためには ローカルWebサーバ を建てる必要があります*1。思いついたローカルWebサーバの簡易比較をしてみます。
比較項目は以下のとおりです。それぞれの項目の内容は、最低限のオプションで起動した場合の内容です。
- 起動方法
- ディレクトリのファイル一覧を表示できるか
- 文字コードを指定しなくても大丈夫か*2
- ポート番号
- 備考
比較対象のプロダクトリスト
- PHP のビルトインサーバ
- serve(Dart製のWebサーバ)
- Ruby (PORO)
- http-server (npm)
- serve (npm)
- light-server (npm)
- webpack-dev-server
PHP のビルトインサーバ
起動方法
$ php -S localhost:12345
ディレクトリのファイル一覧の表示
表示できない。
文字コード無指定でOKか
NG。
ポート番号
コマンド実行時のポート番号。
serve(Dart製のWebサーバ)
起動方法
$ serve
ディレクトリのファイル一覧の表示
表示できない。
文字コード無指定でOKか
OK。
ポート番号
8080
備考
リポジトリのアドレスは下記。
Ruby (PORO)
起動方法
$ ruby -run -e httpd . -p 54321
ディレクトリのファイル一覧の表示
表示できる。
文字コード無指定でOKか
NG。
ポート番号
コマンド実行時のポート番号。
備考
MIME タイプ が考慮されないため、たとえば .md
ファイルをクリックするとダウンロードが始まる。
http-server (npm)
起動方法
npm (yarn) install
した上で、$ http-server
ディレクトリのファイル一覧の表示
表示できる。
文字コード無指定でOKか
OK。
ポート番号
8080
備考
もし public/
ディレクトリが存在していれば、そこをサーバのルートディレクトリとして見に行く。
serve (npm)
起動方法
npm (yarn) install
した上で、$ serve
ディレクトリのファイル一覧の表示
表示できる。
文字コード無指定でOKか
OK。
ポート番号
5000
light-server (npm)
起動方法
npm (yarn) install
した上で、$ light-server -s .
ディレクトリのファイル一覧の表示
表示できる。
文字コード無指定でOKか
OK。
ポート番号
4000
webpack-dev-server
起動方法
npm (yarn) install
した上で*3、$ webpack-dev-server
ディレクトリのファイル一覧の表示
表示できる。
文字コード無指定でOKか
OK。
ポート番号
8080
備考
webpack.config.js
や エントリポイント が存在しないとエラーが出ます。しかし、単純な Webサーバ としては動作します*4。