📘

DenoでVue3を動かしてみる

2020/10/31に公開

JavaScript

Vue.js

Deno

tech

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

この機能を使って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のこれからが楽しみです

Discussion