webpack을 사용하여 json 스키마를 typescript에 동적으로로드하는 방법

Question

개체를 설명하는 json 스키마가 있습니다. Person. 내가 타이프 스크립트 파일에 해당 스키마를로드 할 수 있도록하고 싶습니다 직접이 방법이 들어

import Person from './schema/person.schema.json'; 

, 나는 (json-schema-to-typescript를 사용하여) 다음을 통과 타이프 인터페이스 선언에 JSON 파일을 변환 로더를 생성 ts-loader의 결과.

내 웹팩 이런 식으로 구성되어

:

: JSON 파일 문자열로 간주되도록

webpack.config.js (발췌)

module: { 
    rules: [ 
    { 
     test: /\.ts$/, 
     loader: 'ts-loader', 
    }, 
    { 
     test: /\.schema\.json$/, 
     loader: 'ts-loader!jsonschema-loader', 
     exclude: /(node_modules)/, 
    }, 
    ] 
}, 

이 question 내가 선언을 구성한 다음을

선언 .dts :

declare module '*.schema.json' { 
    const schema: string; 
    export default schema; 
} 

내 로더가 처리하는 파일 이름을 변경하므로 ts-loader가로드하는 것으로 생각하는 내용은 person.schema.ts입니다. 또한, 내 로더의 결과가 올바른지 확인했습니다. 그러나

/** 
* This file was automatically generated by json-schema-to-typescript. 
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file, 
* and run json-schema-to-typescript to regenerate this file. 
*/ 

export interface Person { 
    firstName: string; 
    lastName: string; 
    /** 
    * Age in years 
    */ 
    age?: number; 
    [k: string]: any; 
} 

내 프로젝트를 빌드 할 때, 사람은 객체로 인식되지 않고 컴파일이 실패 : 여기있다

import Person from './schema/person.schema.json'; 

const person: Person = { 
    lastName: 'Doe', 
    firstName: 'John', 
}; 
console.log(person); 

컴파일이 실패

하는 index.js :

ERROR in ./src/index.ts 
(3,15): error TS2304: Cannot find name 'Person'. 

내 선언에서 .schema.json 파일의 xport를 문자열로 사용하면 내 로더가 동적으로 파일 이름 (this.resourcePath)을 ts 파일로 변경하여 ts-loader가이를 표준 ts 파일로보고 Person 객체를 내 보내야합니다.

내가 뭘 잘못하고 있니?

Answer 1

사용 appendTsSuffixTo

난 당신이 오히려 사용자 정의 로더에서 파일 이름 자신을 변경하는 대신, ts-loader의 appendTsSuffixTo option를 사용하는 경우 설정이 작동합니다 생각합니다. 의견에서 언급했듯이 Person을 가져 오거나 내보내는 방법을 조정해야 할 수도 있습니다.

appendTsSuffixTo을 사용하면 this.resourcePath = this.resourcePath + '.ts'; (또는 유사한 코드)을 로더에서 삭제합니다. 그리고 이런 식으로 웹팩 설정을 조정 : 당신은이 방법을 사용 typings.d.ts 제거 할 수

module: { 
    rules: [ 
     { 
     test: /\.ts$/, 
     loader: 'ts-loader', 
     options: { 
      appendTsSuffixTo: [/\.schema.json$/] 
      } 
     }, 
     { 
     test: /\.schema\.json$/, 
     loader: 'ts-loader!my-own-loader', 
     exclude: /(node_modules)/, 
     }, 
    ] 
    }, 

.

왜 그렇습니까?

귀하의 접근 방식이 효과가없는 이유는 분명하지 않습니다. 직관적으로 그것은 appendTsSuffixTo을 사용하는 것과 같아야하는 것처럼 보였습니다. 그래서 나는 ts-loader을 통해 어떤 일이 벌어지는지를보기 위해 약간의 디버깅을했다.

resourcePath을 직접 수정하면 ts-loader/dist/index.js에서 크게 보입니다. 그러나 문제는 ts-loader/dist/servicesHost.js에서 잘못됩니다. 난 그냥 내 로더에 this.resourcePath을 변경할 때

는 특히, 내 example.schema.json 파일 resolveModuleName() 반환 undefined를 참조하십시오. 그러나 appendTsSuffixTo을 사용할 때 올바르게 해결되는 것을 볼 수 있습니다.

는 내가에 기여 (또는 전문가) ts-loader 아니지만,이 내 걸릴 로더에 this.resourcePath을 수정할 때, 당신의 .schema.json 파일이 실제로 그것을 가져온 곳 해결 될 컴파일,하지만 실패 할 것입니다. 실행하도록 웹팩 빌드를 얻기

기타 고려 사항

은 한 가지입니다; IDE에서 멋진 개발자 경험을 제공하는 것도 또 다른 일입니다. 자세한 내용은 관련 질문 인 this answer을 참조하십시오. 유용한 샘플 코드는 this Github repo을 참조하십시오.