Angular2 如何使用 AngularCLI (webpack) 添加第三方插件

Question

我正在使用 AngularCLI（webpack 版本）开发 Angular2 应用程序。我有一个第三方插件 (ScrollMagic)，它本身有自己的一组可选插件。我已经安装了 ScrollMagic 代码库，它位于 node_modules。我可以使用以下语法将 ScrollMagic 加载到我的页面中：

let ScrollMagic = require("ScrollMagic");

这似乎可以进入 node_modules 并加载 ScrollMagic，我可以让第 3 方插件工作。

ScrollMagic 有一个自己的插件 (ScrollMagic/plugins/debug.addIndicators.min.js) 用于调试。我很难加载这个插件。我尝试了以下方法：

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

找不到插件

我正在使用 AngularCLI，所以我尝试将 debug.addIndicators.min.js 添加到 angular-cli.json 的 "scripts" 部分。这会将 debug.addIndicators.min.js 加载到全局 space 但 ScrollMagic 本身似乎无法识别它（此时，我仍在使用 let ScrollMagic = require("ScrollMagic"); 来加载ScrollMagic 本身）。

然后我尝试在 angular-cli.json 的 "scripts" 部分正确加载 ScrollMagic。这会在全局 space 中加载 SCrollMagic，但随后我必须从代码库中删除 'let ScrollMagic = require("ScrollMagic")'，否则 ScrollMagic 会加载两次。我设置了 let ScrollMagic : any 来让 TypeScript 不抱怨，但是 ScrollMagic 永远不会被正确实例化。

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

在此先感谢您的帮助。

Answer 1

好的，我明白了。这就是我所做的。

在 angular-cli.json 中，我将其添加到脚本中：

      "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，并且我有指示器和滚动事件。

Angular2 如何使用 AngularCLI (webpack) 添加第三方插件

Angular2 how to add 3rd party plugin using AngularCLI (webpack)

scrollmagic

angular-cli

angular