Closure Compiler로 컴파일 된 es6 모듈 라이브러리로 내 보낸 기호가 없습니다.

Question

시작 지점 : 단일 라이브러리 파일에서 Closure Compiler (ADVANCED_OPTIMIZATIONS 수준)에 의해 많은 js 파일이 성공적으로 컴파일됩니다 (경고/오류 없음). 이 JS 파일에서

:

• goog.require 및 goog.provide 외부 필요 whatever (CONST/기능/클래스/VAR)의 앞에 사용되는 그들 사이
• /** @export */을/내보내기 물건을 가져 오는 데 사용된다 도서관.

일부 HTML 파일에는이 라이브러리에 정의 된 whatever에 모두 액세스 할 수있는 라이브러리 및 일부 비 컴파일 된 js가 포함되어 있습니다.

내가 원하는 무엇 : 다른 JS 파일에서

• goog.require이 클래스의 목록을 import로 대체, 기능 : 나는 각각에 대해 무슨 짓을 ES6 모듈 구문

  로 이동 파일을 JS

• goog.provide이 제거되고 다른 클래스의 앞에 추가 된 export, 다른 js 파일에서 필요한 기능 등
• 시도해보십시오. whatever이 라이브러리 외부에 필요할 때마다 /** @export */에 대한 변경 사항이 없습니다.
• 2보십시오 : 모든 /** @export */ whatever는 goog.exportSymbol('whatever', whatever)

로 대체이 성공적으로 (ADVANCED_OPTIMIZATIONS 수준이 여전히 경고/오류) 컴파일되지 않습니다.

문제는 지금 같은 HTML 파일을 라이브러리에 정의 된 모든 whatever는 브라우저에 의해 "정의되지 않은"볼 수 있습니다. 실제로 Object.keys(window)을 콘솔에 입력하면 컴파일러 (aa, ba, ca 등)가 변경 한 모든 심볼 이름을 볼 수 있지만 내 보낸 심볼 whatever은 표시되지 않습니다.

예 : demoVisitors은 라이브러리에 정의되어 있으며 외부에서 필요합니다. 라이브러리 파일에서 전에 ... w("demoVisitors",[Oa,La,Ma,Na]); ...을 볼 수 있었으며 HTML 페이지에 콘텐츠가 제대로 표시되었습니다. es6 모듈이 변경된 후 시도 1에 대해 (demoVisitors이 정의 된 파일 이름 임)과 시도 2에 대해 H("demoVisitors",[Na,Ka,La,Ma]);을 볼 수 있습니다. demoVisitors은 동일한 페이지에 대한 브라우저에서 정의되지 않았습니다.

Answer 1

추가 조사가 끝난 후 해결책을 찾았습니다.

콘솔에 아무런 오류없이 브라우저에로드되었지만 (물론 undefined whatever 제외) 내 라이브러리가 실행되지 않았습니다. 필자는 단순히 클로저 라이브러리를 컴파일 할 파일 스택보다 먼저 이동 시켰고 내 라이브러리를 적절한 기호로 내보내 브라우저에서 올바르게 실행했습니다. 자세한 내용은 아래를 참조하십시오.

심볼을 내보내는 세 가지 방법은 컴파일 된 es6 모듈 (/** @export */ whatever, goog.exportSymbol('whatever', whatever), window['whatever'] = whatever)에서 작동합니다. 첫 번째 2는 세 번째 심볼 (루트 심볼)을위한 편리한 방법입니다.

그럼에도 불구하고 /** @export */ myClass은 myClass$$module$source-filename-with-path과 같이 불쾌하지 않은 난해한 이름을 생성합니다. 난독 화 이름 myClass을 얻으려면 내 코드에 goog 함수를 사용하지 말고 컴파일 된/컴파일되지 않은 모드를 모두 사용하려면 /** @export */을 제거하고 class myClass { ... } 이후에 unobfuscateSymbol('myClass', myClass)을 추가하십시오. 클로저 라이브러리에 정의 된 함수 exportSymbol에서 영감을 얻은 것은 내 "자체"함수입니다. 클래스와 같은 루트 기호에만 필요하며 클래스에 정의 된 모든 기호 (속성, 함수 등)에 대해 /** @export */을 유지할 수 있습니다. 나는 세부 사항에서 문제를 확인하는 방법

export function unobfuscateSymbol(publicPath, object, objectToExportTo = window) { 
    // Same code can be used compiled and not compiled so unobfuscation only in case of obfuscation 
    if (unobfuscateSymbol.name !== 'unobfuscateSymbol') { 
     const /** Array<string> */ parts = publicPath.split('.'); 
     let /** Object */ objToExportTo = objectToExportTo; 
     let /** string */ part; 
     const /** number */ nbOfParts = parts.length; 
     for (let /** number */ i = 0; i < nbOfParts; i += 1) { 
      part = parts[i]; 
      if ((i === (nbOfParts - 1)) && object) { 
       objToExportTo[part] = object; 
      } else if (objectToExportTo[part] && objectToExportTo[part] !== Object.prototype[part]) { 
       objToExportTo = objectToExportTo[part]; 
      } else { 
       objToExportTo[part] = {}; 
       objToExportTo = objToExportTo[part]; 
      } 
     } 
    } 
} 

: 여기

소스 코드입니다

1. 내보내기 문제를 이해하기를, 나는에 정의 된 exportSymbol 기능에 중단 점을 넣어 시도 브라우저에서 내 HTML 테스트 페이지를로드하는 동안 클로저 라이브러리 : 중단 없음 ...

2. 나는이 실행 문제를 console.log ("m y 라이브러리가 실행 중입니다. ") : goog.require/goog.provide 버전의 내 라이브러리에서 메시지를 볼 수 있었지만 es6 import/export 버전에서는 볼 수 없었습니다. 실행하지 않고, 물론 심볼을 내보낼 필요가 없습니다.

3. 저는 IIFE로 제 라이브러리를 포장했습니다. 클로저 컴파일러 인수 : --output_wrapper "(function(){%output%})()" 및 내 라이브러리의 실행 오류 메시지가 브라우저 콘솔에 나타납니다. 클로저 라이브러리의 기본 네임 스페이스 인 goog.global은 중단 시간에 undefined이라는 것을 발견했습니다.

4. 컴파일 할 파일 스택보다 먼저 클로저 라이브러리를 이동했습니다. 닫는 컴파일러 인수 : –js closure-lib-path/base.js –js myfile1.js –js myfile2.js … 컴파일 된 goog 물건이 먼저 exportSymbol 첫 번째 호출에 의해 생성 된 /** @export */ 컴파일되기 전에 있습니다.

5. 브라우저에서 실행 및 내보내기가 정상적으로 수행되었습니다. 방금 내 라이브러리의 goog.require/goog.provide 버전과 동일한 친숙한 내 보낸 이름을 얻기 위해 위에 설명한 unobfuscateSymbol 함수를 추가했습니다.