DenoでViteのあらゆるフレームワークを動かす

はじめに

先日denoのバージョンが1.28となりました。これによってdenoからnpm互換性の機能を安定して利用することが可能となり、多くのnpmモジュールの利用が行えるようになりました(Release blog)。
この記事では1.28のバージョンアップにともなってViteを用いた環境をDenoでも構築可能になったのでその方法を紹介します。とても簡単にできるのでDenoで開発したい方はぜひお試しください。この記事はこちらを参考にしました。
型情報を与えてTypeScriptの利用も試みましたが、型がうまく伝わらずdenoの実行時に満足のいくチェックをさせるところまで検証できませんでした。TypeScriptを用いた構築が可能になれば再度紹介したいと考えています。

Viteを用いた環境構築

まず、Nodejsで開発するときのVite環境の雛形が欲しいのでnpmコマンドで環境を作成します。

npm create vite@latest

project nameにはお好きな名前を、Select a frameworkは対象のフレームワークをSelect a variantはJavaScriptを選択してください。実行後project nameで指定した名前のディレクトリが生成されます。
この状態で動くことを確かめるために以下のコマンドを入力してください。

cd vite-project
npm install
npm run dev

問題なく動作しましたら準備完了です。
作成したプロジェクトにはNode.js固有のファイルがあるのでDeno環境に移行するのに備えて削除しておきます。package.json、package.lock.json、node_modulesが不要なので削除してください。

Vanilla

バニラなJSなのでこちらはdeno.jsonファイルを新たに作成するだけで設定が完了します。

deno.json

{
  "tasks": {
    "dev": "deno run -A --unstable --node-modules-dir npm:vite",
    "build": "deno run -A --unstable --node-modules-dir npm:vite build",
    "preview": "deno run -A --unstable --node-modules-dir npm:vite preview",
    "serve": "deno run --allow-net --allow-read https://deno.land/std@0.157.0/http/file_server.ts dist/"
  }
}

deno task dev、deno task build、deno task previewでviteのコマンドを動かすことができます。deno task serveはdenoのhttps://deno.land/std@0.157.0/http/file_server.tsを用いてサーバーを立てています。

Vue

Vanilaと同様にdeno.jsonを定義します。
以降のライブラリではvite.config.jsも変更します。まず拡張子をjsからmjsに変更します。Node環境の時はpackage.jsonによってtypeをmoduleに設定されることでjsファイルはES Modulesとして扱われます。一方、DenoではES Modulesを用いることを明示的に表す必要があるためにmjsとして今す。次に、読み込むライブラリをvite.config.tsで定義します。viteを用いる場合は最初にこのファイルを読み込むのでここでライブラリの定義します。

vite.config.mjs

import { defineConfig } from 'npm:vite@^3.2.3'
import vue from 'npm:@vitejs/plugin-vue@^3.2.0'

import 'npm:vue@^3.2.41'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

React

Vanilaと同様にdeno.jsonを定義します。vite.config.jsはVueと同じように変更します。

vite.config.mjs

import { defineConfig } from 'npm:vite@^3.2.3'
import react from 'npm:@vitejs/plugin-react@^2.2.0'

import 'npm:react@^18.2.0'
import 'npm:react-dom@^18.2.0'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

Preact

Vanilaと同様にdeno.jsonを定義します。
vite.config.jsも変更します。

vite.config.mjs

import { defineConfig } from 'npm:vite@^3.2.3'
import preact from 'npm:@preact/preset-vite@^2.4.0'

import 'npm:preact@^10.11.2'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact()]
})

lit

Vanilaと同様にdeno.jsonを定義します。
vite.config.jsを変更します。

vite.config.mjs

import { defineConfig } from 'npm:vite@^3.2.3'

import 'npm:lit@^2.4.0'

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: 'src/my-element.js',
      formats: ['es']
    },
    rollupOptions: {
      external: /^lit/
    }
  }
})

svelte

Vanilaと同様にdeno.jsonを定義します。
vite.config.jsを変更します。

vite.config.mjs

import { defineConfig } from 'npm:vite@^3.2.3'
import { svelte } from 'npm:@sveltejs/vite-plugin-svelte@^1.1.0'

import 'npm:svelte@^3.52.0'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()]
})