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在沒有調試工具的情況下工作，這是我想要用於生產的工具，但我無法爲開發目的調試它。

在此先感謝您的幫助。

來源

2016-09-21 Tom Schreck

好吧我想通了。這就是我所做的。現在

 "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

我加入到這個腳本。

來源

2017-01-15 16:20:29 Zuriel

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

回答

相關問題