目的
Electronでデスクトップアプリを作成する際に、Bootstrap4を使用して綺麗なデスクトップアプリを作成する。
準備
BootStrapのインストール
npm install bootstrap@4.0.0-beta
jQueryのインストール
npm install jquery
Popper.jsのインストール
npm install popper.js
陥ったミス
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<meta http-equiv="Content-Security-Policy"
content="script-src 'unsafe-inline' 'self';default-src 'self'; style-src 'self' 'unsafe-inline';" />
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<script src="./node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="./node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
エラーメッセージ
デベロッパーツールに下記のメッセージが表示された。
下記のメッセージを日本語訳にすると、どうやら、jQueryを上部に持ってこないといけないらしい。
Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included >before Bootstrap's JavaScript.
at bootstrap.min.js:6
解決方法
解決方法として、
<script src="./node_modules/jquery/dist/jquery.slim.min.js"></script>
のコードを <head>タグ内に移動させるだけの単純な作業で解決。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<meta http-equiv="Content-Security-Policy"
content="script-src 'unsafe-inline' 'self';default-src 'self'; style-src 'self' 'unsafe-inline';" />
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="./node_modules/jquery/dist/jquery.slim.min.js"></script>
</head>
<body>
<script src="./node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
終わりに
エラーメッセージの内容をしっかりと確認していなかったのが、悩ませる大きな原因でした。