2020-05-19に更新

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を元にローカルでビルド済みのキャッシュを読み込む)。ということで仕方なく断念。

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

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, Vue.js, React, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント