TypeScript 에서 비 코드 모듈 가 져 오기

TypeScript 에서 비 코드 모듈 가 져 오기
이해 해 야 할 것 은 TypeScript 는 언어 로 서 코드 모듈 만 처리 합 니 다.다른 유형의 파일 과 같은 비 코드 모듈 의 가 져 오기 이 치 는 다른 포장 도 구 를 통 해 이 루어 집 니 다. 예 를 들 어 웹 응용 프로그램의 그림, 스타일, JSON 과 HTML 템 플 릿 파일 등 입 니 다.다만 우 리 는 TypeScript 차원 에서 모듈 해석 오류 문 제 를 해결 해 야 합 니 다.어댑터 모듈 성명 은 비 코드 모듈 을 직접 가 져 오 면 TypeScript 가 잘못 보 고 됩 니 다.

/**  Cannot find module './index.html'. */
import * as html from "./index.html";

TypeScript 문서 에서 이 부분 에 대한 설명 은 Wildcard module declarations 입 니 다. 즉, 마스크 모듈 을 정의 합 니 다.SystemJS 와 AMD 와 일치 합 니 다. 가 져 올 때 경로 에 정 의 된 파일 형식 앞 접 두 사 를 추가 합 니 다. 이 경로 의 추가 정 보 는 컴 파일 후 실 행 될 때 실제 로 더 에 해당 하 는 플러그 인 을 통 해 처리 할 수 있 습 니 다.typings.d.ts

declare module "*!text" {
    const content: string;
    export default content;
}
// Some do it the other way around.
declare module "json!*" {
    const value: any;
    export default value;
}

main.ts

import fileContent from "./xyz.txt!text";
import data from "json!http://example.com/data.json";
console.log(data, fileContent);

형식 앞 접 두 사 를 정의 하 는 방식 은 코드 에서 TypeScript 가 잘못 보고 한 문 제 를 해결 할 수 있 지만 컴 파일 된 후 모듈 주소 의 형식 접두사 나 접두사 !text, json! 가 제거 되 지 않 았 기 때문에 require 에 해당 하 는 플러그 인 을 정의 해 야 합 니 다.

$ node main.js
internal/modules/cjs/loader.js:670
    throw err;
    ^

Error: Cannot find module './xyz.txt!text'

VSCode 의 원본 코드 를 보 았 다 면 스타일 파일 을 가 져 오 는 방법 을 많이 사 용 했 을 것 입 니 다.

import 'vs/css!./selections';

여기 vs/css! 는 위 에서 언급 한 방식 이지 만 VSCode 는 사용자 정의 모듈 로 더 Microsoft / vscode - loader 를 사용 하여 처리 합 니 다.다음 과 같이 파일 형식의 성명 도 할 수 있 습 니 다: typings. d. ts

declare module "*.html" {
  const value: string;
  export default value;
}

그리고 정상 적 인 경 로 를 써 서 가 져 오 면 됩 니 다. 컴 파일 된 생산 경 로 는 변 하지 않 았 습 니 다.

/** ✅ ojbk */
import * as html from "./index.html";

다른 유형의 접미사 에 대해 서 는 동일 합 니 다.typings.d.ts

declare module "*.png" {
  const value: string;
  export default value;
}

declare module '*.scss' {
  const content: any;
  export default content;
}

주의해 야 할 것 은 이것 은 TypeScript 의 모듈 분석 오류 문 제 를 해결 한 것 일 뿐 실제 파일 가 져 오기 가 TypeScript 에서 한 것 이 아니 라 추가 포장 도구 가 필요 합 니 다.웹 팩 에 서 는 해당 스타일 로 더 와 이미지 로 더 가 이 파일 들 의 분석 과 로드 를 책임 집 니 다.JSON 파일 가 져 오기 JSON 형식 이 너무 흔 하기 때문에 TypeScript 는 자신의 컴 파일 러 에서 불 러 오 는 지원 을 제공 합 니 다. 해당 컴 파일 파라미터 --resolveJsonModul 를 통 해 열 립 니 다.JSON 파일 가 져 오기 지원 을 만 들 기 tsconfig.json 시작 합 니 다.tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "resolveJsonModule": true
  }
}

그리고 코드 에서 JSON 파일 을 가 져 올 때 정확 한 경 로 를 지정 합 니 다. 다른 정상 적 인 TypeScript 모듈 과 같 습 니 다.접두사 도 필요 없고, 별도의 성명 서 를 작성 할 필요 도 없다.main.ts

import * as data from "./bar.json";
console.log(data);

위의 코드 를 컴 파일 하려 고 시도 할 때 다음 과 같은 오 류 를 얻 을 수 있 습 니 다.

$ tsc
error TS5055: Cannot write file '/Users/wayou/Documents/dev/github/ts-wildcard-module/bar.json' because it would overwrite input file.

컴 파일 후 JSON 파일 도 같은 이름 으로 생 성 되 기 때문에 컴 파일 출력 디 렉 터 리 가 지정 되 지 않 은 상태 에서 tsc 는 현재 디 렉 터 리 로 기본 출력 되 기 때문에 위 JSON 파일 이 덮어 쓸 것 이라는 알림 이 있 습 니 다.그래서 해결 방법 은 출력 디 렉 터 리 설정 을 추가 하 는 것 입 니 다.tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "resolveJsonModule": true,
+    "outDir": "dist"
  }
}

다시 컴 파일 하면 정상적으로 실행 할 수 있 습 니 다.

$ tsc
$ node dist/main.js
{ data: 'blah' }

esModuleInterop 옵션 에 맞 춰 가 져 오기 가 더욱 간결 합 니 다.tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
+    "esModuleInterop": true,
    "resolveJsonModule": true,
    "outDir": "dist"
  }
}

main.ts

- import * as data from "./bar.json";
+ import data from "./bar.json";
console.log(data);

일반 프로젝트 를 정리 할 때 웹 팩, Parcel 등 전문 적 인 포장 도 구 를 사용 하고 자원 의 분석 과 로드 는 잘 처 리 됩 니 다.다만 TypeScipt 모듈 에서 오 류 를 분석 하 는 문 제 를 해결 해 야 합 니 다. 이 때 는 해당 파일 에 대해 성명 파일 을 작성 하 는 방식 을 사용 할 수 있 습 니 다.관련 자원

Wildcard module declarations