package.jsonのversion情報をjsで使う（javascript/vite）

package.jsonの情報はprocess.env.npm_package_***で取得できます。
これをviteのconfigに渡してあげることで内部のjsで環境変数として呼び出せます。

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  define: {
    APP_VERSION: JSON.stringify(process.env.npm_package_version),
  },
});

// vite-env.d.ts

/// <reference types="vite/client" />
declare const APP_VERSION: string;

// main.js

console.log(APP_VERSION);

index.htmlから上記の情報にアクセスさせたい
1. 関連記事

index.htmlから上記の情報にアクセスさせたい

html側ではenvを読めないため、pluginで対応が必要になります。
html-transform中に介入して、自力で%VARIABLE%のような文字列を置換してしまうのが楽ちん。

この例は.envに渡した変数を使っていますが、envのところは任意の変数を作って渡しちゃってOKです。

// vite.config.ts

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => ({
  plugins: [
    htmlPlugin(loadEnv(mode, '.')),
  ]
}))

function htmlPlugin(env: ReturnType<typeof loadEnv>) {
  return {
    name: 'html-transform',
    transformIndexHtml: {
      order: 'pre' as const,
      handler: (html: string): string =>
        html.replace(/%(.*?)%/g, (match, p1) =>
          env[p1] ?? match
        ),
    }
  }
}