webpack2でScrollMagicのGSAPプラグインを読み込めなかった件

webpack(v2)で開発をしていて、ScrollMagicとTweenMaxを使おうと思ったときに躓いてしまったのでメモ。

npmでインストール

ScrollMagicもTweenMaxもnpmにあるのでそちらからインストール

npm install gsap
npm install scrollmagic

使うです

iwanttousescrollmagic.js

import {TweenMax} from "gsap";
import ScrollMagic from "scrollmagic";

~~ 略 ~~

this.controller = new ScrollMagic.Controller();
this.targetElement = document.getElementById('#targetElement');
new ScrollMagic.Scene({
  triggerElement: '#triggerElement',
  duration: 100,
  offset: 50
})
.setTween(this.targetElement, {
  y: -100
})
.addTo(this.controller);

setTweenするならgsap用のプラグインを使ってねとエラー。ごもっともです。

(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

プラグインをインポートしてみる。

import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';

webpackからコンパイル失敗の旨お知らせいただいた。

Module not found: Error: Can't resolve 'TweenMax' in ~~~

TweenMaxモジュールを見つけることができなかったという内容のようだ。なんでだろう？

imports-loaderを使って解決

resolve.alias など、いろいろ試してみたが駄目だった。
こちらに記載されているとおりにimports-loaderを使って以下のようにプラグインを読み込むようにしたところ、正常に動作するようになった。

import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';

imports-loaderについてはこちら。webpackで使用するうえで、そのままでは使えないような記述のjsファイルやサポートされていないモジュールのフォーマットで作成されたものなどを取り込むときに使用するらしい。

動いたので良かったです。