요구 사항로드 Wicket 라이브러리

Question

지도 자료에 라이브러리 Wicket을 사용하고 있습니다. 정상적으로 스크립트 태그로 참조하면 정상적으로 작동합니다. 아래와 같이 작업 링크.

https://arthur-e.github.io/Wicket/sandbox-gmaps3.html

문제는 모듈 로더에 RequireJS를 사용하여 프로젝트를 진행할 때 발생합니다.

다음 코드는 시도한 것입니다.

require.config({  
    waitSeconds: 200, 
    paths: { 
     'wicket': '/Vendor/Wicket/wicket', 
     'wicketGmap3': '/Vendor/Wicket/wicket-gmap3' 
    }, 
    shim: { 
     wicket: { 
      exports: 'Wkt' 
     }, 
     wicketGmap3: {    
      deps: ['wicket'] 
     }   
    }, 
}); 
require(['wicket', 'wicketGmap3'],(Wkt) => { 
    $(() => { 
     angular.bootstrap(document, ['app']); 
    }); 
}); 

오류는 여전히 다음과 같습니다.

Uncaught ReferenceError: Wkt is not defined at wicket-gmap3.js:744

경험이있는 사람이 있습니까?

Answer 1

wicket.js 파일의 전화 번호는 define입니다. 그러므로 shim을 설정하는 것은 쓸모가 없습니다. 왜냐하면 shim은 비 AMD "모듈"(즉, 실제로는 모듈이 아니지만 우리가 원하는 것처럼 행동하기를 원하는 파일)에만 의미가 있기 때문입니다. AMD 모듈은 define으로 전화합니다.

반면에 wicket-gmap3.js은 AMD 모듈이 아닙니다. 따라서 을 수행하려면에 shim이 필요합니다. 그러나 그것은 글로벌 공간에 존재하는 Wkt에 달려 있습니다. wicket.js의 논리는 define을 호출 할 때 전체 공간에 Wkt을 설정하지 않습니다. (은입니다. 올바르게 동작하는 AMD 모듈의 올바른 동작입니다.) 직접 누출을 수행해야합니다. 내가 wicket-glue라는 이름의 새 모듈을 추가 한

define("wicket-glue", ["wicket"], function (wicket) { 
    Wkt = wicket; // Deliberately leak into the global space. 
    return wicket; 
}); 

require.config({  
    waitSeconds: 200, 
    paths: { 
     'wicket': '/Vendor/Wicket/wicket', 
     'wicketGmap3': '/Vendor/Wicket/wicket-gmap3' 
    }, 
    map: { 
     '*': { 
      wicket: 'wicket-glue', 
     }, 
     'wicket-glue': { 
      wicket: 'wicket' 
     } 
    } 
    shim: { 
     wicketGmap3: {    
      deps: ['wicket'] 
     }   
    }, 
}); 

:

은 당신의 설정을 변경

. 종종 이러한 모듈을 구성과 함께 배치하여 추가 데이터 가져 오기가 필요하지 않도록합니다. 원한다면 별도의 파일에 넣을 수도 있습니다. (나는 것을했다면, 그래도 난 define에 첫 번째 인수를 제거하는 것와 RequireJS 파일 이름에서 모듈 이름을 사용하도록 파일 wicket-glue.js의 이름을 지정합니다.)

을 나는 또한 기본적으로 "에서라는 map를 추가했습니다 모든 모듈에서 모듈 wicket이 필요할 경우 wicket-glue을로드하고 wicket이 필요할 경우 wicket-glue을로드하십시오.로드하려면 wicket "을로드하십시오.

그물 효과는 wicket이 필요할 때마다 Wkt이 전체 공간으로 유출되며 wicket-glue이 정상적으로 작동해야합니다.