Viteでテンプレートを利用せずにVanilla JS環境を作成する #npm

はじめに

viteにはVanilla JS用のテンプレートが用意されており、簡単に使うことができます

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

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

Done. Now run:

  cd vite_project
  npm install
  npm run dev

ただちょっとしたサンプルには不要なファイルも多いので、テンプレートを利用せずクリーンな環境を作成してみます(npmのライブラリを手軽に利用できるアプリを作ることができます)

--template vanilla で作成したファイル一覧

viteのインストール

npmの初期化、viteインストール
cowsayはviteでnpmライブラリを読み込めることを確認するためにインストール

$ npm init -y
$ npm i -D vite
$ npm i cowsay

npmモジュールを利用したサンプルWebアプリの作成

main.jsの作成

viteはcommonJSをrequire()で読み込めないのでstatic importを行う

$ cat <<EOF > main.js
import * as cowsay from 'cowsay';
console.log(cowsay.say({ text: 'ウシだよ！' }));
EOF

index.htmlの作成

main.jsは絶対パスにする。Viteが変換処理(npmライブラリを読み込ん)をしてくれるのでブラウザで実行できる

$ cat <<EOF > index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <script type="module" src="/main.js"></script>
  </body>
</html>
EOF

package.jsonの修正

開発サーバーとビルドを行えるようにする

package.json

{
  "name": "vite_no_template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
-   "test": "echo \"Error: no test specified\" && exit 1"
+   "dev": "vite",
+   "build": "vite build",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^5.2.10"
  },
  "dependencies": {
    "cowsay": "^1.6.0"
  }
}

動作確認

開発サーバーを実行する

$ npm run dev
  VITE v5.2.10  ready in 160 ms

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

ブラウザで開くと、コンソールに「cowsay」が表示されていることが確認できる

ビルドを行う

ビルドを行うと./distフォルダに出力される

$ npm run dev

> vite_no_template@1.0.0 build
> vite build

vite v5.2.10 building for production...
✓ 4 modules transformed.
dist/index.html                0.29 kB │ gzip: 0.22 kB
dist/assets/index-BcOpN3_6.js  4.01 kB │ gzip: 1.99 kB
✓ built in 144ms

簡易http-serverを起動して表示すると、コンソールに「cowsay」が表示されていることが確認できる

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

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