javascriptのファイルの結合について

Question

/*foo.js*/
//import gsap from 'gsap';
export function bar() {
  var tl1 = TimelineMax.to(...);
}

/*bar.js*/
//import gsap from 'gsap';
export function bar() {
  var tl2 = TimelineMax.to(...);
}

/*main.js*/
//import gsap from 'gsap';←これではエラーになった(TimelineMax not defiend)
import { foo } from "./foo.js";
import { bar } from "./bar.js";

foo;
bar;

例えばこのように2つのファイルでそれぞれTimelineMaxを使用する場合、2つのファイルでそれぞれgsapをインポートするしかないのでしょうか？

2つのファイルは別部分の動作なので一つにしたくはありません。

最終的にHTMLで読み込むのはmain.jsです。

Answer 1

2つのファイルでそれぞれgsapをインポートするしかないのでしょうか？

はい。それでなにか問題がありますか？

Comments

[bigbox267]

2つのファイルでそれぞれ読み込むことでファイル容量が余計に大きくなったり動作が重くなったりなどの問題は起きないのでしょうか？
それとも、同じものを読み込んでいるとwebpackが理解してくれるとかでしょうか？

[maisumakun]

ブラウザで使う形へどのように持っていくかにもよりますが、両者でgsapをimportしても、gsapが複数読み込まれる事態になることは通常ありません。

[bigbox267]

そうなのですね。
ありがとうございました。