TSC(TypeScript Compiler)를 사용하여 Node.js ES6(ESM) 모듈을 해결하는 방법.TSC가 올바른 파일-ext를 내보내지 않습니다.

TSC(TypeScript Compiler)를 사용하여 Node.js ES6(ESM) 모듈을 해결하는 방법.TSC가 올바른 파일-ext를 내보내지 않습니다.

저는 제 TypeScript 프로젝트를 JavaScript로 변환하려고 하는데, 뭔가 잘못된 것 같습니다.를 ES6 모듈( ESM)을 통해 모듈(ESM했습니다."module":"ES6"설정은 문제를 해결하지 못합니다.

내 구성은 다음과 같습니다.

  {
    "compilerOptions": {
      "module": "es6",
      "target": "es6",
      "lib": ["es6"],
      "sourceMap": true,
    }
  }

한 쌍의 모듈을 사용한 테스트 사례:

저는 두 개의 모듈을 사용하여 간단한 테스트 사례 시나리오를 작성했습니다.

1. 첫 번째 모듈 — — 아래와 같이 상수만 내보냅니다.

   •   export const testText = "It works!"; 
     

2. 두 번째 모듈 — 첫 번째 모듈에서 내보내기만 가져옵니다.

   •   import { testText } from 'module1';
       alert(testText);
     

두 번째 모듈(또는 main.js)의 출력 파일이 내 문서에 내장되어 있으며, 다음과 같이 형식 속성을 추가했습니다.type="module"에▁<script ...>아래에 표시된 것처럼)

    <script src="main.js" type="module"></script>

Firefox 중 하나로 테스트할 때 (dom.moduleScripts.enabled약:config) 또는 Chrome Canary(Experimental Web Platform 플래그가 설정됨)에서 설정되어 작동하지 않습니다.

Typescript를 것 .import { testText } from 'module1'; 성명서에 성명서 -JS 문서import { testText } from 'module1';둘 다 하게 동일합니다 (표시: 둘다정동일니합다히확참고)▁(

ES6 는 다음과 import { testText } from 'module1.js';(.확장자 ) 코드에 (.js 파일 확장자) 파일 이름은 .js 파일 확장자입니다.

한 게 요, 유형 한 건가요?"module": "es6"설정이 제대로 작동하지 않습니까?생성된 가져오기 문에 .js 파일 확장명이 추가되도록 TSC를 구성하는 방법이 있습니까?

이것은 TypeScript에서 혼란스러운 디자인 선택입니다.

단기적으로 출력 파일을 지정하여 해결할 수 있습니다.

main.ts합니다..js확장 및 경로:

import { testText } from './module1.js';
alert(testText);

이것은 받아질 것입니다.module.ts정하게, 하만출은으로 ..js내선 번호 포함.

에 "" " " " " " " " 를 붙여야 ../모듈 이름은 나중에 사용할 수 있도록 예약되어 있습니다.

작성자의 메모: "이 답변이 게시된 날짜는 답변이 처음 작성된 날짜와 다릅니다. TypeScript 변경으로 인해 두 번의 답변을 새로 작성해야 했습니다. 날짜가 이 게시물과 매우 관련이 있기 때문에 답변이 진부해질 경우를 대비하여 몇 군데에 날짜를 포함시켰습니다. 이것은 독자들이 제가 아래에 쓴 기술의 특정 버전을 언제 참조했는지 알 수 있도록 도와줄 것입니다.

원래 2021년 12월에 작성됨

---

TS, ESM, NODE 스택에 대한 "es-module-specifier" 플래그 수정

---

ESM은 노드에 통합하기 쉬운 기술이 아니었습니다.TypeScript 언어로 Node ES-Modules를 작성할 때, 음, 그것은 실제로 특정 시점에서 절대로 일어날 수 없는 것처럼 보였습니다.IMO는 특정 프로젝트처럼 보였는데, 노드 백엔드 RTE에서 표준을 지원하기 위해 지금까지 수행한 작업을 수행하기를 원하지 않았습니다.어쨌든, 다음은...

처음에 제가 이 질문에 대답했을 때 저는 이 문제를 겪고 있는 사람들에게 다음 플래그를 사용할 것을 참조하십시오.

node --es-module-specifier-resolution=node

(참고로, 솔루션은 스니펫에 첨부된 링크에서 제공되었습니다.)

이 플래그는 현재까지 작동했거나 최고의 솔루션으로 작동했습니다(또는 TS 4.7 Night Release까지).참고해야 할 것은 환경과 현재 작업 중인 프로젝트에 따라 이 솔루션이 현재로서는 최고의 솔루션이 될 것이라는 점입니다.

그러나 더 나은 솔루션을 사용할 수 있게 되었습니다.

---

현 시점에서 많은 부분이 변경되었습니다.

v4.6 TypeScript의 Nightly 릴리스 동안 새로운 module & moduleResolution 지정자에 대한 지원이 추가되었습니다. 이들은 (분명히)tsconfig.json그들은 중에 풀려났습니다.v4.6v4.6 베타가 출시되기 조금 전인 야간 빌드 4.7이 야간 빌드가 되었습니다.지금이다,v4.7 베입니다타입니다.v4.8새로운 야간 빌드입니다(최신 버전을 확인하기 위해 이 모든 버전을 언급합니다).

TS에서 제공한 새로운 지정자/설정입니다.

1. "module": "NodeNext"
2. "moduleResolution": "NodeNext"

v4.7에 새 설정이 포함될 것으로 발표되었습니다.

이을 하는 는 새로운 settings가 이내가것플 TSC 그래가(katsconfig 정설다)때다니입에서 사용 v4.6기억하신다면, 제가 몇 단락 전에 언급했습니다; TypeScript는 그것들을 현재의 최신 typescript@latest버전 ()으로 출시하지 않기로 결정했습니다. 그래서, 그것들은 공식적으로 TypeScript에 포함될 것입니다.v4.7더 이상 베타 버전이 아니며 최신 버전이 됩니다.

항상다함사야합니다해용께과와 ."esModuleInterop": true("Node.js" 측에서 변경되지 않는 한)"esModuleInterop" 설정은 ESM에 대한 지원을 용이하게 하며, 일부 노드 모듈은 ESM이 새 ESM 가져오기/내보내기 모듈 시스템과 제대로 작동하도록 필요합니다.

입니다.tsconfig.*.json각 새 프로젝트의 시작점으로 추가하는 구성 템플릿입니다.

    "compilerOptions": {
        // Obviously you need to define your file-system
        "rootDir": "source",
        "outDir": "build", 

        // THE SETTINGS BELOW DEFINE FEATURE SUPPORT, MODULE SUPPORT, AND ES-SYNTAX SUPPORT
        "lib": ["ESNext"],
        "target": "ES2020",
        "module": "NodeNext",
        "moduleResolution": "NodeNext", 
        "esModuleInterop": true, // Eases ESM support
        "types": ["node"],
        "allowSyntheticDefaultImports": true,
    }

작성일: 2022년 5월 22일 오전 8시 50분(태평양 표준시)

---

& 지정자에 대한 지원 얻기

---

따라서 새로운 구성을 지원하는 데 사용할 수 있는 몇 가지 TS 버전이 있습니다.베타 또는 나이틀리를 사용할 수 있습니다.다음은 사용 가능한 3가지 버전을 보여주는 차트입니다.지금으로선typescript@latest@입니다.v4.6새 구성을 지원하지 않습니다.

---

TS 릴리스	버전	실행할 NPM 명령	지원이 있습니까?
TS 최신 버전	v4.6	npm i -D typescript@latest	아니요.
TS 베타	v4.7	npm i -D typescript@beta	네.
TS 야간	v4.8	npm i -D typescript@next	네.

---

최신 버전을 사용하도록 개발 환경 구성

새 TypeScript 버전을 사용하도록 환경을 구성해야 합니다.편집자의 구성을 문서화할 수는 없지만 V.S. 코드는 TypeScript에서 가장 일반적인 것으로 보이며, V.S. 2022도 유사한 구성을 사용합니다.

VS Code에서 다음 구성을 작업 공간 파일에 추가합니다.

  // "./.vscode/settings.json"
  { "typescript.tsdk": "./node_modules/typescript/lib",}

런타임 환경 구성

(이 답변은 Node.js입니다.)

---

그런데 왜 그럴까요?RTE를 구성해야 하는 이유는 무엇입니까?무슨 일입니까?RTE는 모든 것을 알고 있지 않습니까?

• 아니요, RTE가 자동으로 모든 것을 아는 것은 아닙니다.일종의 지시나 단서가 있어야 합니다.

**그러나 이미 파일을 구성하지 않았습니까?

• 예, 하지만 이것은 TypeScript용입니다. 이제 TS 구성을 위한 노드가 준비되었는지 확인해야 합니다.

---

노드에 공통이 아닌 ECMA스크립트 모듈을 실행할 것임을 알려야 합니다.JS 모듈.우리는 이것을 두 가지 다른 방법 중 하나로 할 수 있습니다.

1. 첫 번째는 다음과 같이 구성하는 것입니다.package.json구성 파일의 "유형" 필드를 사용하는 파일입니다.

    // @file "package.json" 

    {
        "name": "project-name",
        "version: "2.4.16",
        "type": "module", // <-- Lets env know this project is an ESM

        // the rest of your package.json file configuration...
    }

2. 또는 위와 같은 작업을 수행할 수 있지만 다음을 사용합니다.--input-type "module"

3. 마지막으로 ESM 파일 확장자를 사용하여 원하는 작업을 수행하고 각 파일을 만들 수 있습니다.js에서는 , typescript에서는 입니다.

들어 은 " 예들어인파다같음습다니과은일를덱"가 됩니다.index.ets는 TSC를 합니다.index.ejs.

마지막으로 "ES-Module"을 작성할 때 가져오기가 어떻게 작동하는지 이해하는 것이 중요합니다.제가 몇 가지 메모를 열거하겠습니다, 이 정보에 가장 적합한 형식이 될 것 같습니다.

1. 파일을 가져올 때 JavaScript 파일 확장자를 사용해야 합니다.

2. ESM 가져오기는 "possix 파일 경로"가 아닌 URI를 사용하여 가져옵니다.CJS 모듈의 경우는 그 반대였습니다.

3. 특수 문자는 %23을 사용하는 # 및 %3F를 사용하는 ?와 같이 백분율로 인코딩되어야 합니다.

4. TypeScript를 사용하면 MimeType을 추가할 수 없지만 ESM은 추가된 데이터 유형을 사용하므로 MimeType을 추가하는 것이 좋습니다.

예를 들어 다음 URI 형식을 사용하여 Node API의 & Libraries에서 가져오는 것이 좋습니다.

import EventEmitter from 'node:events';

const eEmit = new EventEmitter();

언급URL : https://stackoverflow.com/questions/44979976/how-to-resolve-node-js-es6-esm-modules-with-the-typescript-compiler-tsc-tsc