https://zenn.dev/uki00a/articles/frontend-development-in-deno-2022-autumn

半年程前に以下のような記事を書きました。

この半年の間に、Deno本体でnpmパッケージサポートが入るなどいくつか大きな動きがあったため、この記事ではそれらの動向について紹介いたします。

Deno本体でnpmパッケージの読み込みがサポート

Deno v1.27時点では、Denoからnpmパッケージを利用するには--unstableが必要です。 安定化については、今月リリースされる予定のDeno v1.28にて実施されることが検討されています。
• https://github.com/denoland/deno/pull/16473

Deno v1.25でDeno本体にnpmパッケージのサポートが入りました。

以下のように、npm:<パッケージ名>[@<バージョン>]形式のURLを指定することで、Denoからnpmパッケージを直接importすることができます。

deno.land/xなどで公開されているパッケージと同様に、npm:で指定されたnpmパッケージについては、deno runなどのコマンドを実行する際に、npmレジストリから自動的にダウンロードされ、グローバルキャッシュ(DENO_DIR)に保存されます。

TypeScriptサポートについて

TypeScriptの型定義が同梱されたnpmパッケージについては、deno checkなどのコマンドを実行した際に、自動で型チェックを行ってくれます。

もし型定義ファイルが含まれないパッケージに対しても型チェックを適用したい際は、以下のように@deno-typesディレクティブで型定義を指定する必要があります。

// @deno-types="npm:@types/[email protected]"
import Koa from "npm:[email protected]";

const app = new Koa();

app.use(async ctx => {
  ctx.body = "Hello Deno!";
});

app.listen(3000);

Viteを動かす

Deno本体にnpmパッケージのサポートが入ったことにより、DenoでViteが動かせるようになりました。

create-vite-extraというパッケージではDenoでViteを使用して開発するためのテンプレートが提供されています。

以下のコマンドを実行すると、プロジェクトを生成することができます。

$ deno run --unstable --allow-env --allow-read --allow-write npm:create-vite-extra@latest

以下はdeno-vueテンプレートを使用した際に生成されるvite.config.mjsの例です。