Angular2如何使用AngularCLI添加第三方插件（webpack）

问题描述：

我正在使用AngularCLI（webpack版本）开发Angular2应用程序。我有一个第三方插件（ScrollMagic），它自己有一套可选的插件。我已经安装了ScrollMagic代码库，它驻留在node_modules中。我可以使用下面的语法加载ScrollMagic到我的网页：Angular2如何使用AngularCLI添加第三方插件（webpack）

let ScrollMagic = require("ScrollMagic");

这似乎伸进node_modules和负载ScrollMagic，我可以得到第三方插件工作。

ScrollMagic有一个它自己的插件（ScrollMagic/plugins/debug.addIndicators.min.js）用于调试。我无法加载这个插件。我试过以下内容：

require("ScrollMagic/plugins/debug.addIndicators.min.js");

并且找不到插件。

我正在使用AngularCLI，因此我尝试将debug.addIndicators.min.js添加到angular-cli.json的“脚本”部分。这将debug.addIndicators.min.js加载到全局空间中，但ScrollMagic本身似乎没有识别它（此时，我仍然使用let ScrollMagic = require（“ScrollMagic”）来加载ScrollMagic本身）。

然后我尝试在angular-cli.json的“脚本”部分加载ScrollMagic。这会将SCrollMagic加载到全局空间中，但我必须从代码库中删除'let ScrollMagic = require（“ScrollMagic”）'，否则ScrollMagic会加载两次。我设置让ScrollMagic：任何使TypeScript不会抱怨，但然后ScrollMagic永远不会正确实例化。

我在这里错过了什么？我可以让ScrollMagic在没有调试工具的情况下工作，这是我想要用于生产的工具，但我无法为开发目的调试它。

在此先感谢您的帮助。

答

好吧我想通了。这就是我所做的。现在

 "scripts": [ 
    "../node_modules/gsap/src/minified/TweenMax.min.js", 
    "../node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js", 
    "../node_modules/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js", 
    "../node_modules/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js" 
    ],

当我写我的部件我只是用scrollmagic正常人一样，我有指标和滚动事件：

在角cli.json

我加入到这个脚本。

Angular2如何使用AngularCLI添加第三方插件（webpack）

相关推荐