브라우저 클라이언트와 노드 기반 서버간에 공유되는 다양한 모듈을 포함하는 TypeScript 프로젝트에서 작업하고 있습니다. 브라우저 용 webpack/rollup을 사용하여 모듈을 묶어서 트리밍하고 싶습니다. 가져 오기를 유지하기 위해 TypeScript 컴파일러에서 ES6을 대상으로하도록 구성해야합니다. 그러나 Node에서 실행하려면 ES5를 대상으로해야합니다. ES5는 가져 오기를 필요로 바꾸어 트리 흔들림을 방지합니다.Tree-shaking Type 브라우저/노드간에 공유되는 스크립트/JavaScript
모든 것을 두 번 컴파일하지 않고도이를 해결할 수있는 우아한 방법이 있습니까? ES5로 한 번, ES6으로 다시 컴파일 하시겠습니까?
가능한 해결책은 다음과 같습니다 두 경우 모두
0.1 단일 ES6을 대상으로하지만, external 옵션 활성화 및 대상 ES5와 노드의 경우 사용 추가 롤업 단계에서. 이 경우 tsc은 모든 유형 주석 및 기타 유형 관련 항목을 제거 할 것을 보장하므로 ES6 → ES5 및 트리 - 떨림 항목을 변형하여 롤업을 수행합니다. CLI API는 구체적인 모듈이있는 external = string[] 만 지원하므로 롤업의 자바 스크립트 API가 필요합니다.하지만«외부 모두»가 필요합니다. 이 경우 자바 스크립트 API : external: (id) => id != main_file.
는 단점 :
당신이 롤업 CLI API를 사용할 수없는 경우0.2을 사용하여 롤업을 작성해야 롤업 : ES5 및 ES6을 사용하여 두 개의 다른 대상을 생성합니다. 하나의 번들에서 많은 타겟을 생성하는 것은 롤업에서 매우 간단합니다.
단점 : 공식적으로 롤업의 조직 날개 아래 살고있는 경우에도
.3 노드 대상에 대해 ES6 만 생성하고 ESM을 사용하십시오. 당신은 링크로 더 많은 것을 배울 수 있지만 실제로 이것은 이미 잘 작동하고 performance shall be OK입니다.
는 단점 : ESM을 공급
0.4 (단순) 노드 대상에 패쳐를 필요로하고 (전체 빌드를 수행 속도를«두 번 모두를 컴파일»입니다 귀하의 주요 문제 두 번 제작 한 경우에도) 생산에만 사용됩니다. dev에서 필요한 작업 만 수행하고 tsc (또는 롤업) --watch 기능을 활용하여 간단한 스크립트를 소개 할 수 있습니다.