Bootstrapのcarousel.jsのみを使う方法

Question

Bootstrap5を使いWebサイトを作っていますが､
JS(bootstrap.js)が必要なコンポーネントを全て使いたいわけではなく､
Carouselだけ使いたいです｡
なので､公式のソースファイルをDLして､js/dist/carousel.jsをHTMLにscriptタグで読み込ませました｡
試しにCarouselのサンプルをひとつ実行させてみました｡
しかし､bootstrap.jsを使っていた頃には出なかったエラーが出ます｡

Uncaught TypeError: Class extends value undefined is not a constructor or null
    at carousel.js:223
    at carousel.js:9
    at carousel.js:10

私はcarousel.jsをそのまま読み込ませるのではなく､何か事前にしなくてはいけない作業があるのではないかと思っているのですが､何か必要な作業はありますか？

Comments

[Lhankor_Mhy]

エラーメッセージを見る限り、クラスの継承をしようとしたところ親クラスが存在しないようです。
bootstrap.js に依存しているのではないかと思います。

[Lhankor_Mhy]

あ、bootstrap.js に依存してるわけではないですかね。別のモジュールに依存しているということではないかと思います。

[Lhankor_Mhy]

こことかが参考になるのでは。
https://getbootstrap.jp/docs/5.0/customize/optimize/#javascript-%E3%82%92%E5%B0%8F%E3%81%95%E3%81%8F%E3%81%99%E3%82%8B

[nyclsn]

ありがとうございます｡imoprtするんですね｡

JSファイルに
import Carousel from '../js/carousel.js'
const carousel = new Carousel(document.getElementById('carouselExampleControls'))
とかいてみましたが､質問のエラーが消えないのと
Cannot use import statement outside a module
というエラーが新しく出てしまいました｡

一応､手法は教えていただいたので､新規に質問し直したほうが良いでしょうか？

[Lhankor_Mhy]

うーん、そうではなくて、carousel.js *が*別のモジュールに依存している、という話です

[m.ts10806]

あれ、今bootstrapのサイト落ちてますかね。
connection failureになってる。そのせいかcdn使ってるサイトが大変なことに。

[m.ts10806]

いずれにしても利用しているバージョンが5で「Carouselのサンプル」が4.2なのでそのままは動かないと思いますが・・

[nyclsn]

>Lhankor_Mhyさん
すいません｡
この最適化の方法はまた違うんですね｡
あと､依存しているということでは無いのかと思っていました｡
つまり､carousel.js単体ではなく依存しているモジュールが必要ということでしょうか｡
しかし､何に依存しているのかが私には分かりません｡

[Lhankor_Mhy]

> m.ts10806さん

当方からも見ることができないです。SOも見れないので、CDN系のトラブルかもですね。
バージョンの違いは気づきませんでした、ありがとうございます。

[Lhankor_Mhy]

> 何に依存しているのかが私には分かりません

そこはコードを読んでがんばるしかないですね。
https://github.com/twbs/bootstrap/blob/main/js/src/carousel.js

[nyclsn]

わかりました！
もし何なのかが分かったらLhankor_Mhyさんにも分かるようにここにかいておきますね｡

[Lhankor_Mhy]

ご丁寧にありがとうございます。

Answer 1

依存関係にあるモジュールをいくつも洗っているうちに
｢さすがにこんな大量のモジュールを扱ってやっと機能させるのはおかしい｣と気が付き､
Webpackで必要なコンポーネントをインストールするのがだということに気が付きました｡
やはり公式サイトの｢最適化｣の項目通りにやるのが正しかったようです｡

なので､ソースファイルをDLしてやる方法はおすすめしません｡