LoginSignup
0

More than 1 year has passed since last update.

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

Posted at

はじめに

先日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.jsonpackage.lock.jsonnode_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 devdeno task builddeno 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

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()]
})

スクリーンショット 2022-12-02 19.50.47.png

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()]
})

スクリーンショット 2022-12-02 20.06.03.png

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()]
})

スクリーンショット 2022-12-02 20.15.50.png

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/
    }
  }
})

スクリーンショット 2022-12-02 20.18.21.png

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()]
})

スクリーンショット 2022-12-02 20.20.16.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0