webpack4でhowler.jsを外部参照で使いたい

Question

やりたいこと

お世話になります。
webpack4系でhowler.jsを外部参照したいのですが、
やり方が分からず困っております。

環境

開発言語: Typescript(3.7.5)
Node.js: 10.16.3
@types/howler:2.2.0
howler:2.2.0
webpack:4.43.0

発生している問題・エラーメッセージ

test.ts:182 Uncaught TypeError: Cannot read property 'Howl' of undefined

該当のソースコード

• webpack.config.js

 externals: {
        howler: 'howler'
  }

• test.ts

 import { Howl } from 'howler';

 const howl = new Howl(HowlOption);

• index.html

  <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.0/howler.core.min.js"></script>

howler.jsで提供しているモジュールに
howlerは無いので、インポートしてもundefinedになるのは分かるのですが、
じゃあどうしたらいいんだろう？という状態です。

webpack公式ドキュメントを読んではみたのですが、
よく分からず挫折してしまいました。。。

Answer 1

僕も同じ問題にぶつかっておりました。

webpack.config.js で以下のように externals を指定すると動くと思います。

  externals: {
    howler: 'window'
  }

HowlerがReactのようにグローバルで1つにまとめておらずグローバルな領域に Howl や Howler などを放り込むので、上記のように window とグローバルのルートを指定すると動くようです。

Comments

[yama1919]

回答遅くなりすみません、ありがとうございます。
動作確認できました。助かりました！