Question

我正在迁移Angular应用程序以使用Angular CLI，并且在该应用程序的一部分中，动态导入了一些JS脚本，以便可以加载画布动画。

导入脚本的代码是使用Webpack的require.ensure(...)：

require.ensure([
    '../../../../../assets/external-js/confetti',
    '../../../../../assets/external-js/TweenLite.min',
    '../../../../../assets/external-js/Physics2DPlugin.min'
], require => {
    const TweenLite = require('../../../../../assets/external-js/TweenLite.min');
    const Physics2DPlugin = require('../../../../../assets/external-js/Physics2DPlugin.min');
    let confettiCannon = require('../../../../../assets/external-js/confetti');

    this.confettiCannon = new confettiCannon.ConfettiCannon();

    this.confettiCannon.start();
});

正如您从上面看到的，正在加载3个脚本。使用此代码可以成功导入脚本，但是发生的是，当confettiCannon.start()运行时，它最终会调用TweenLite，但发现它是undefined。

我尝试使用import(...)来代替使用async和await函数，但是结果是一样的。

TweenLite是用于简单缓动功能的GSAP插件。导入脚本时，应在窗口上附加一个TweenLite变量，但是在代码动态导入脚本之后，TweenLite仍设置为udnefined。

我不确定问题是否与Angular CLI有关，因为这在具有自定义Webpack配置的早期版本的应用程序中可以解决。也许我缺少应该在这种情况下使用的加载程序/插件，但我没有在Angular CLI中安装它。

运行：

Angular v8.2.0
Angular CLI 8.2.1
Webpack v4.38.0

Webpack require.ensure（..）或动态导入无法导入脚本

0 个答案: