ビルドした js ファイルの中のオブジェクト等を html の script タグ内で使う

最終更新日: 2023-05-22

サービスを作る上でシンプルな設計を維持しつつずっと開発できればいいけど、
時には、ビルドした js ファイルの中のオブジェクト等を html の script タグ内で使う必要が出てきたりする。

npm install したパッケージを html 内で呼び出してみる

適当にパッケージをインストールする。

npm install --save comma-number

main.js

この commaNumber を html ファイル内で使いたい。

import commaNumber from 'comma-number'

index.html

ビルドした js ファイルを読み込んだ次の行で呼び出してもエラーになる。

<!doctype html>
<html>
<head>
	<meta charset='utf8'>
	<title>sample</title>
</head>

<body>
	<script src='/js/bundle.js'></script>
	<script type="text/javascript">
		// エラーが出る
		// caught ReferenceError: commaNumber is not defined
		console.log(commaNumber)
	</script>
</body>
</html>

window オブジェクトを使う

main.js

window オブジェクトに存在しない名前を使う。

import commaNumber from 'comma-number'

window.psychedelicnekopunch = {
	commaNumber: commaNumber,
}

index.html

<!doctype html>
<html>
<head>
	<meta charset='utf8'>
	<title>sample</title>
</head>

<body>
	<script src='/js/bundle.js'></script>
	<script type="text/javascript">
		const commaNumber = window.psychedelicnekopunch.commaNumber
		console.log(commaNumber)
	</script>
</body>
</html>