devserver使いたい話と、v-modelのlazyの話

だらだら寝言をかいています。 こんな投稿よまずにコードを書いて、ドキュメントを読んで、先へすすみましょう。

webpack devserverつかいたい件。

つかいたいけど、非SPAだと、バックエンドWAFとの兼ね合いでwebpack watchしたときもファイルに書き出すほかない。 ファイルに書き出すとおそい。。。
ちょっとここのデザイン書き換えて…ビルド終わってない…
あ、ここのコードミスってた。修正して….ビルド終わってない…..
という待ち時間がはっせいしてつらい。

バックエンドWAFというか、
ブラウザやjsのリクエストを受けて、htmlやjsonを返すweb application server
（rails, play, spring bootなど）
をメインのweb serverを用意した場合、そのWAFはwebpackの設定など知らんので webpackでビルドしたファイルを静的ファイルとして認識して、配信する。

本番環境ではそれでいいんだけど、開発時はdevserver使いたいので こんな感じにしたい。

書くサーバーサイドWAFでこういう構成がさくっとできるようにサポートしてくほしい。

その他: 「そんなv-modelで大丈夫か？」

v-modelにはv-model.lazyというものがあります。
普通はinput eventで更新が行われるんですが lazyつけるとchange eventで更新が行われます。
シチュエーションによってはlazy用意してくれるなんてvue最高!ってなります。

ということで、computedやwatchなど、更新時になにか処理をやっている場合は 「このフォーム、lazyつけなくてよいのか？」 と気にするがよいですね。

以下の例で、lazyをつけなかったらfirefoxだとenterキー押しても改行が表示されないと思います。
エンターキーを打った瞬間にtrim()とfilter()がおこなわれてしまうので。

<template>
  <textare v-model.lazy="gitignoreListAsText"></textare>
</template>

<script>
...
data() {
  gitignoreList: []
},
computed: {
  gitignoreListAsText: {
    get() {
      return this.gitignoreList.join("\n");
    },
    set(text) {
      this.gitignoreList = text.split("\n")
                               .map((line) => line.trim())
                               .filter((line) => line);
    },
  },
}
...
</script>

（謎:改行表示はされないけど、たぶんブラウザの持っているtextareaには改行文字が残ってる???）

追記

情報に誤りがありました。 firefoxでエンターキーを押したときに改行されないのは、イベントハンドリングの扱いに問題があるからではなく、 white-space: nowrap によるものでした。