概要
Jestyの無駄遣い。
きっかけはVue.js
Webpackに依存しないVue.jsを使ったフロントアプリって作れないのかを調べていたところ、以下の記事を発見。
Vue.jsのコンポーネントを*.vueではなくJavaScriptで記述して、type="module"
や import を利用して、Vueコンポーネントを動的にロードできますよという記事でした。
<script type="module" src="xxx.js"></script>
記事内においては、npmのbrowser-syncパッケージを用いて、nodeでサーバーを立てて説明をしています。
ここで思ったのが、Webpack使わないっていう記事なのに、Node.jsは使うの?という疑問。
Node.jsは嫌いってわけでもないのですが、「Httpサーバー立てるだけだろ。Pythonのワンライナーでいんじゃね?」
と思い、以下のような感じでHTTPサーバー立ててみたところ、
# for python 2.x
python -m SimpleHTTPServer 9000
# for python 3.x
python -m http.server 9000
type="module" のファイル読み込みがブロッキングされる現象が発生。
ただし、Chromeのシークレットモードだとブロッキングされないという謎現象も発生。
Python側のシングルスレッドとかの動作?でうまく行かないんだろうなーと原因追求は特にせず、なんかちゃんとした軽いHTTPサーバー無いかなと探したところ、あるじゃんNimに。Jesterが。
Jesterを見てみると
Jesterを見てみるとpublicフォルダというのを用意すれば、その配下のファイルを静的ファイルとして提供できると。
またstaticDir()関数で設定をオーバライドできるよともあったので、アプリケーション実行時のフォルダをstaticDirで設定してしまえば、Pythonでのワンライナーと同じ動作させられそう。
# publicフォルダの中を公開
$ ls public
hogehoge.html
$ curl http://localhost:xxxx/hogehoge.html
という感じで、作ってみたのはこちら。
# インストール
$ git clone https://github.com/6in/simple-http.git
$ cd simple-http
$ nimble install
# httpコマンドが~/.nimble/binに作成
$ http --help
Usage:
http --port=<port> [--root=<root>]
http (-h | --help)
http --version
結局のところ、jester起動時のオプションに、静的フォルダのパスを渡せば良いみたいだったので、こんな感じに。
let settings = newSettings(
Port(port), root
)
var myJester = initJester(settings)
httpコマンドは、ポートとルートディレクトリ(デフォルトはカレント)を指定して実行します。
最初の記事に戻って、サンプルをcloneし作成したhttpコマンド(笑)で動かしてみる
$ git clone https://github.com/maoberlehner/goodbye-webpack-building-vue-applications-without-webpack.git nowebpack
$ cd nowebpack
$ http --port=8181 --root=src
出た!
Muslでシングルバイナリにもしてみる
linux限定ですが、nimbleにmuslタスクを追加しています。Muslの記事で構築済みの前提です。
simple-httpをcloneしたフォルダで、muslタスクを実行するとbinフォルダにhttpコマンドが作成されます。
$ nimble musl
...
Created binary: bin/http
# lddコマンドで確認
ldd bin/http [master]
動的実行ファイルではありません
$ bin/http --port=8182 --root=src
# nowebpackフォルダに移動
$ cd ../nowebpack
# 作成したシングルバイナリを指定して、別ポートで実行
$ simple-http/bin/http --port=8182 --root=src
出た!!
まとめ
まったく俺得でしかないhttpコマンドをjesterを利用して作ることができました。
どのLinuxディストリビューションでも動きそう?なシングルバイナリも作ることができました。
Webpackを使わないVue.jsのアプリの作りを調べていたら、なぜかhttpサーバーを作っていたという『ヤクの毛刈り』のような話でした。
Vue.jsはどうしたかっていうと、WebPackで開発することにしました。