BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース 新しいDenoモジュールによるVueアプリケーションのビルドとコンパイル

新しいDenoモジュールによるVueアプリケーションのビルドとコンパイル

ブックマーク

原文(投稿日:2021/01/19)へのリンク

vno Denoモジュールは、最近、初の安定バージョンをリリースした。Denoランタイム環境でVue単一ファイルコンポーネントをコンパイルおよびバンドルするための最初のビルドツールとして自らを述べている。vno v1.0は、パーサー、コンパイラー、バンドラー、アダプターを備えている。サーバ側のレンダラーが計画されている。

vnoチームは彼らの動機を次のように説明した。

Vueは、非常に多様性のあるエキサイティングなエコシステムを備えた、親しみやすいJavaScriptフレームワークです。Denoは、Node.jsの欠点を改善することを目的としたランタイム環境です。Denoランタイム環境でVueフレームワークを活用できるようにしたかったですが、そのようなツールが見つかりませんでした。そこで、自分たちで作ることにしました。

vnoは、コマンドラインインターフェイス(CLI)を介して統合されたツールスイートである。このスイートには、パーサー、コンパイラー、バンドラー、スキャフォールドジェネレーターが含まれている。vnoは、開発者がDenoを離れることなくVue Webアプリケーションを初めて開発できるようにすることを主張している。既存のVueツールは通常、ノードおよびブラウザー環境で実行される。

開発者は、vnoによって提供されるスキャフォールディングを使用してDenoターミナルで新しいVueプロジェクトを作成できる。

vno create [プロジェクト名]

上記のコマンドは、次のように事前にvnoがインストールされていることを前提としている。

deno install --allow-net --unstable https://deno.land/x/vno/install/vno.ts

開発者は、vno(vno buildコマンド)を使用してVueコードベースをビルドすることもできる。ビルドツールは、ファイル構造を再帰的にウォークスルーし、検出されたVueファイル(.vue拡張子)を解析する。ビルドツールは、index.htmlで参照されるbuild.jsファイルとstyle.cssファイルを生成する。そのHTMLファイルは、Vueアプリケーションを起動するためにWebサーバによって提供される。
vno build animated gif demo
(出典: vno gitHubプロジェクト)

vnoは、開発サーバ(vno run dev)と本番サーバ(vno run server)の両方を実行する機能を提供する。vnoの動作は、vno.config.jsonファイルを介してカスタマイズできる。設定ファイルの例は次のとおりである。

{
  "root": "App",
  "entry": "./path/to/rootcomponent",
  "options": {
    "title": "an example application"
    "port": 4040
  },
  "server": "./path/to/server.ts"
}

最初に2014年にリリースされたVueは、Webアプリケーションを作成するための進歩的なJavaScriptフレームワークになるよう努めている。Denoは、JavaScriptとTypescriptの安全なランタイムになるよう努めている。ユーザは、Denoプログラムの実行時に明示的なアクセス許可を付与できる。Denoプログラムは、実行時に保護された機能を使用する許可を要求する場合もある。Denoは、2年間の開発の後、2020年5月にバージョン1.0に到達した。siit.coのCTOであるErisan Olasheni氏は最近、Denoを実際の例とともに紹介するInfoQに関する記事を公開した。

vnoモジュールは、Mikey Gower氏、Jordan Grubb氏、Kyle Jurassic氏、Andrew Rehrig氏によって開発されている。vnoは、MITライセンスの下で配布されているオープンソースソフトウェアである。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT