Viteを利用してvanillaJSでnpmを利用できる環境を作成(設定ファイル不要) #npm

はじめに

(Webアプリの場合)npmでインストールしたライブラリは、CDNから読み込むような感じでは使えません

importや requireでライブラリを読み込み、さらにそれをバンドルする必要があります

以前、rollup.jsを使ってビルドする手順を作成したのですが、Hot Module Replacement(HMR、JSの変更を即時でブラウザに適用する機能)ができないため、ちょっとした修正のたびにビルドを行う必要があり面倒でした

そこでこの記事では、Viteを利用して、Hot Module Replacementが行われる快適な環境を作成してみます

環境作成

node.jsはインストール済みの想定
Leafletをnpmでインストールして、簡単な地図アプリを作成します

1. viteでテンプレート(`vanilla`)を生成

vanillaとは

日本語に訳すと「素の」、「原型のまま」といった意味です(バニラ味はアイスの「デフォルト」や「プレーン」な味というイメージだから)

ライブラリもフレームワークも使わないで JS を書くことをVanilla JSと呼びます

テンプレートには、vanilla以外にもReactやVue用が用意されています。

$ npm create vite@latest npm_leaflet_vite -- --template vanilla

Scaffolding project in E:\Users\tkykn\git\bundle\npm_leaflet_vite...

Done. Now run:

  cd npm_leaflet_vite
  npm install
  npm run dev

vanillaテンプレートは下記ファイルが生成されました

2. vite環境とleafletをインストール

$ cd npm_leaflet_vite
$ npm install
$ npm i leaflet

3. テンプレートに含まれる不要なファイルを削除

$ rm style.css javascript.svg counter.js

4. `main.js`ファイルの書き換え(leaflet.jsで地図を表示する)

Leaflet公式Quick Start Guideページのサンプルをもとに、地図を国土地理院の地理院タイルに変更したサンプルプログラムです

実行すると富士山頂を中心とした地図が表示されます

main.js

// npmでインストールしたライブラリをimport
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const latLen = [35.3607411, 138.727262]; // 富士山頂の緯度経度
const map = L.map('app'); // 地図を生成
map.setView(latLen, 12); // 緯度経度、ズームレベルを設定
// タイルレイヤを生成し、地理院タイルを地図に追加
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
}).addTo(map);

// mapをエクスポートする
export default map;

5. index.htmlファイルの書き換え(<style>タグの追加)

<head>タグ内に下記のスタイルを追加します(これがないとleafletの高さが0になってしまい表示されないため)

  <style>
    /* 画面全体に地図を表示 */
    body { margin: 0 }
    #app { height: 100vh; }
  </style>

動作確認

vite開発サーバーを実行

npm run devを実行して、URLを開くと地図が表示されます

特に設定ファイルを作る必要もありません

$  npm run dev
  VITE v5.2.9  ready in 186 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

実行するとこんな感じで富士山が表示されます（拡大、縮小、移動もできます）

Hot Module Replacementが機能していることを確認

地図の緯度経度を変えて保存をすると、地図の位置が即座に変更されることが確認できます。

const latLen = [35.3607411, 138.727262]; // 富士山頂の緯度経度
// ↓
const latLen = [35, 135];

(北緯35度、東経135度は兵庫県西脇市のあたりでした)

リリースビルド(と動作確認)

ビルドコマンドを実行すると./distフォルダに出力されます

$ npm run build

$ find . -type f
./assets/index-D9KWrFcb.js
./assets/index-HupOsEJb.css
./index.html
./vite.svg

動作確認

簡易httpサーバー(http-server)を実行して、「http://127.0.0.1:8080/ 」を開くと地図が表示されます

$ npx http-server ./dist
Starting up http-server, serving ./dist

http-server version: 14.1.1

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://192.168.3.7:8080
  http://127.0.0.1:8080
  http://172.28.160.1:8080
Hit CTRL-C to stop the server

Viteを利用してvanillaJSでnpmを利用できる環境を作成(設定ファイル不要)