Angular2 AngularCLI (webpack)을 사용하여 타사 플러그인을 추가하는 방법

Question

AngularCLI (webpack 버전)를 사용하여 Angular2 앱을 개발 중입니다. 나는 제 3 자 플러그인 (ScrollMagic)을 가지고 있는데, 그 자체가 옵션 플러그인 세트를 가지고있다. ScrollMagic 코드베이스를 설치했고 node_modules에 있습니다.

let ScrollMagic = require("ScrollMagic"); 

이 node_modules로드 ScrollMagic에 도달 나타나고 난 타사 플러그인이 작동하도록 할 수 있습니다 나는 다음과 같은 구문을 사용하여 내 페이지에 ScrollMagic를로드 할 수 있습니다.

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를 전역 공간으로로드하지만 ScrollMagic 자체는 인식하지 못합니다 (이 시점에서 저는 여전히 ScrollMagic = require ("ScrollMagic");을 사용하여 ScrollMagic 자체를로드합니다).

그런 다음 angular-cli.json의 "scripts"섹션에서 적절한 ScrollMagic로드를 시도했습니다. 이것은 전역 공간에서 SCrollMagic을로드하지만, 'ScrollMagic = require ("ScrollMagic")'을 코드베이스에서 제거해야합니다. 그렇지 않으면 ScrollMagic이 두 번로드됩니다. ScrollMagic : any는 TypeScript를 불평하지 않게 만들었지 만 ScrollMagic은 올바르게 인스턴스화되지 않습니다.

무엇이 여기에 있습니까? ScrollMagic은 디버깅 도구없이 작업 할 수 있습니다. 이것은 제작을 위해 원하는 것이지만 개발 목적으로 디버깅 할 수는 없습니다.

미리 도움을 주셔서 감사합니다.

Answer 1

좋습니다. 알아 냈습니다. 이것이 내가 한 일이다. 각-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 사용 내 구성 요소를 작성하고 내가 지표와 스크롤 이벤트가있을 때.