Denoでbundleしてブラウザで動かそうとしてみたけどうまくいかない

2020/5、Deno1.0がリリースされました。せっかくなのでDenoで何かシンプルなWebアプリケーションでも作って見ようと思って試したところうまくいきませんでした。

具体的に何を作ろうかと思ったかと言うと、下記のものです。

• ReactでSSR（やる気はなかったけどたくさんサンプルがあったので）
• Reactでブラウザ上の動作（インクリメントとか）まで確認

Denoにはbundleというコマンドがあるので多分これかなと思って実行。

deno bundle client.jsx build/main.js

ちなみにclient.jsxはこんな感じの最低限。

import { ReactDOM } from 'https://dev.jspm.io/react-dom/index.js'

import App from './App.tsx'

const domContainer = document.querySelector('#app')
ReactDOM.render(App, domContainer)

しかしブラウザで実行してみてもうまく行かない。

実際にビルドされたファイルを見てみると……、やけに中身が少ない。調べてみるとなんかimportしたパッケージのURLが貼られているだけ。

System.register(
  "App",
  ["https://dev.jspm.io/react/index.js"],
  function (exports_1, context_1) {

もしかしてbundleのオプションでちゃんと全部含めるやつがあるのでは、と思ったけどそれらしきものもなし。

ということで、やけにDeno+ReactのSSRの記事ばかり見つかるのかと思ったら、とりあえずはランタイムとしてDenoを使う場合をメインとして作られているので、bundleについてもまだWeb向けのものは無いのかもしれない……。というところです。サーバー上で動かすだけならURLだけ分かってればなんとでもなると思うので（多分URLを元にローカルでビルド済みのキャッシュを読み込む）。ということで仕方なく断念。

ということで新たな（というか僕が知らない）情報＆今後のアップデートに期待です。