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

# はじめに
先日[deno](https://deno.land/)のバージョンが1.28となりました。これによってdenoからnpm互換性の機能を安定して利用することが可能となり、多くのnpmモジュールの利用が行えるようになりました([Release blog](https://deno.com/blog/v1.28))。
この記事では1.28のバージョンアップにともなってViteを用いた環境をDenoでも構築可能になったのでその方法を紹介します。とても簡単にできるのでDenoで開発したい方はぜひお試しください。この記事は[こちら](https://deno.com/blog/frameworks-with-npm)を参考にしました。
型情報を与えて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ファイルを新たに作成するだけで設定が完了します。
```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`を用いてサーバーを立てています。

![スクリーンショット 2022-12-02 20.20.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/80f07f44-93eb-8b10-5f66-398cb2081060.png)

# 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を用いる場合は最初にこのファイルを読み込むのでここでライブラリの定義します。
```js: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()]
})
```

![スクリーンショット 2022-12-02 19.50.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/f2b5a5fa-b4ab-699b-0822-db754e1c97ed.png)

# React
Vanilaと同様にdeno.jsonを定義します。vite.config.jsはVueと同じように変更します。
```ts: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()]
})
```

![スクリーンショット 2022-12-02 20.06.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/13b739d5-64f6-96f3-d528-917c56dbfa71.png)


# Preact
Vanilaと同様にdeno.jsonを定義します。
vite.config.jsも変更します。
```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()]
})
```

![スクリーンショット 2022-12-02 20.15.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/9e444279-eb6e-d0b4-4def-5b430a3a9470.png)

# lit
Vanilaと同様にdeno.jsonを定義します。
vite.config.jsを変更します。
```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/
    }
  }
})
```
![スクリーンショット 2022-12-02 20.18.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/0c901fe5-4463-82c6-4db4-b7eebe8b67c7.png)

# svelte
Vanilaと同様にdeno.jsonを定義します。
vite.config.jsを変更します。
```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()]
})
```
![スクリーンショット 2022-12-02 20.20.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591069/cc368cc9-09b6-5a09-287c-6fbc6c945a1e.png)