[typescript] tsconfig의 “대상”및 “모듈”이해

Program / 글쓴이

아래는 tsconfig.json대상을 설정 es5하고 모듈을 설정 한 파일입니다.es6

{
   "compilerOptions": {
   "target": "es5",
   "module": "es6"
   }

}

내 질문은 [import / export] 모듈이 es6의 일부이고 es5가 아니기 때문에 트랜스 파일 된 자바 스크립트 코드에 import / export 문이 있어서는 안됩니다. 하지만 생성 된 자바 스크립트 코드에는 대상이 es5인데도 import / export 문이 있습니다. 어떻게 가능합니까?

답변

모듈 시스템은 언어 구현과 독립적입니다. ES6 (ES2015) 모듈은 import/ export구문을 사용 하며이를 해석하는 것은 모듈 로더에 달려 있습니다.

여기서 ES6 모듈 구문을 활성화하도록 ES2015 모듈 시스템을 사용하여 지정했습니다.

JavaScript 자체는 ES5를 대상으로하고 ES5 기능 만 사용할 수 있지만 이론적으로는 ES2015 모듈 구문으로 작동하는 해당 코드로 모듈 로더를 사용할 수 있습니다. 가능하지만 반드시하고 싶은 작업은 아닙니다. ES5 JavaScript와 함께 CommonJS 또는 AMD 모듈을 사용하는 것이 더 일반적입니다.

분명히이 조합은 TypeScript 2.0 이전에는 허용되지 않았습니다. TypeScript 2.0 릴리스 노트에서 다음과 같이 말합니다.

“이전에는 유효하지 않은 플래그 조합으로 표시 되었으나 이제 target : es5 및 ‘module : es6’이 지원됩니다. 이는 롤업과 같은 ES2015 기반 트리 셰이커 사용을 용이하게합니다.”

답변

이전 답변을 보완하기 위해 2020 년에는 모듈 해상도 및 컴파일 출력을 정의하는 4 개의 TS 구성 옵션이 있습니다.

  • module.
  • target.
  • lib.
  • moduleResolution.

처음 3 개는 출력에 영향을 미치고 후자는 컴파일러가 모듈을 검색하고 번들링하는 방식에 영향을줍니다.

다음은 이러한 옵션에 대한 훌륭하고 간결한 기사입니다. Typescript 혼란 : tsconfig.json 모듈, moduleResolution, target & lib 설명 | 작성자 : Tom Medema | 중간 .

또한 모듈 해결에 대한 문서 : TypeScript : Handbook-Module Resolution .

답변