VanJS x Parcelで環境構築する方法 #parcel

以前VanJS x Vite x TypeScirptで環境構築する方法の記事を投稿しました。

VanJSの公式に、「ViteやParcelなどのツールを使用してWebアプリケーションを簡単に構築できます。」と書いてあるので、今回はParcelでVanJSが使えるように環境構築する方法をご紹介します。

making it handy to build web applications with tools like Vite or Parcel.

環境構築

実行環境

Node.jsが推奨のバージョンであれば問題ないと思います。

$ node -v
v18.17.1

Parcelの環境構築

まずはParcelの環境構築から始めます。プロジェクトのディレクトリを作成してプロジェクトに移動します。

$ mkdir vanjs-parcel
$ cd vanjs-parcel

Parcelをインストールします。

$ npm install -D parcel

src/index.htmlファイルを作成します。

$ mkdir src
$ touch src/index.html

src/index.htmlに以下を記述します。

src/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>My First Parcel App</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

package.jsonに以下を記述します。parcelのバージョンは変更する必要ありません。

package.json

{
  "name": "my-project",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "^2.9.3"
  }
}

以下コマンドでParcelが起動します。

$ npm run start

> start
> parcel

Server running at http://localhost:1234
✨ Built in 194ms

ブラウザで http://localhost:1234 にアクセスして以下が表示されれば、Parcelの環境構築が完成です。

VanJSを使えるように環境構築

VanJSをインストールします。

$ npm install vanjs-core

src/index.htmlを以下のように書き換えます。

src/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>My First Parcel App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="main.js"></script>
  </body>
</html>

src/main.jsファイルを作成します。

$ touch src/main.js

src/main.jsに以下を記述します。

src/main.js

import van from 'vanjs-core'

const App = () => {
  const { div } = van.tags

  return div('こんにちは')
}

van.add(document.getElementById('app'), App())

ブラウザで http://localhost:1234 にアクセスして以下が表示されれば、VanJS x Parcelの環境構築の完成です🎉

まとめ

今回はVanJS x Parcelで環境構築する方法をご紹介しました。個人的にはViteで環境構築する方が多いですが、Parcelは依存関係が少なくシンプルなセットアップなため、細かな設定をする必要が無い場合はParcelでも良いかもしれません。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。