DenoでVue3を動かしてみる

1 min read読了の目安(約1300字

Nodeに替わる新しいjavascript/typescriptランタイムとして登場したDenoにはbundle機能がありdeno bundleで複数のjsファイルを1つにまとめることができます

この機能を使ってVue3を使ったjsファイルたちをbundleしてみました
超超超簡易的なプログラムですがご容赦を・・・


まずは適当なコンポーネントSample.jsを作ります

Sample.js
export const Sample = {
  data() {
    return {
      message: "Hello Deno!"
    }
  },
  template: `<div>{{message}}</div>`
}

main.jsでVueインスタンスの生成、htmlへのマウントをします
(本当はjspmからVueを呼びたかったけどやり方が上手く分からなかったのでunpkgからにしてます...)

main.js
import { Vue } from "https://unpkg.com/vue@next"
import Sample from "./Sample.js"

const Main = {
  template: `<Sample></Sample>`
}

app = Vue.createApp(Main)
app.component("Sample", Sample)
app.mount("#app")

マウント先のhtmlを生成します
bundleしたファイルはapp.bundle.jsとして読み込むようにしておきます

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="app"></div>
    <script src="app.bundle.js"></script>
  </body>
</html>

さて、材料はそろいましたので早速bundleしていきましょー
main.jsをrootファイルとしてapp.bundle.jsにまとめます

$ deno bundle main.js app.bundle.js

ブラウザでindex.htmlを開いてみると、Hello Deno!が表示されるかと思います


今回はコマンドからDenoのbundle機能を使ってみましたが、プログラム内からでもDeno.bundle()を呼ぶことでコマンドと似た機能を使えるそうです(使い方はイマイチわかってないです...)
今の時点ではまだunstableの機能ですが、Deno版webpack的なものがそのうち出てきたりしそうな気がしますねー

Denoのこれからが楽しみです