2017-12-16 24 views
4

オブジェクトを記述するjsonスキーマがありますPerson。私は直接typescriptファイルにこのように、そのスキーマをロードできるようにしたいと思います:このためjsonスキーマをwebpackでtypescriptに動的に読み込む方法

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

を、Iは(json-schema-to-typescriptを使用して)typescriptですインターフェイス宣言にJSONファイルを変換ローダを作成し、合格しますts-loaderの結果。

私のWebPACKがこのように設定されています。

webpack.config.js(抜粋)

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

をこのquestion次のようなJSONファイルは文字列とみなされるように、私は宣言を構成し:

宣言.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'. 

私はe私の宣言で文字列として.schema.jsonファイルのxportを使用すると、ローダーはファイル名(this.resourcePath)をtsファイルに動的に変更し、ts-loaderはそれを標準のtsファイルとして参照し、Personオブジェクトをエクスポートする必要があります。

私は間違っていますか?

+0

help https://stackoverflow.com/q/31173738/794088 – petey

+2

人はデフォルトエクスポートではないので、plsはtry:{./schema/person.schema.json 'からimport {Person}を実行します。 – Daniel

+0

@Daniel実際には、彼は 'default interface Person'をエクスポートする必要があります –

答えて

1

使用appendTsSuffixTo

私はあなたではなく、カスタムローダーでファイル名を自分で変更するよりも、ts-loaderappendTsSuffixTo optionを使用している場合、セットアップがうまくいくと思います。コメントに記載されているように、Personのインポートまたはエクスポートの方法を調整する必要があります。

appendTsSuffixToを使用すると、this.resourcePath = this.resourcePath + '.ts';(または類似のコード)がローダーから削除されます。

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

ます。また、このアプローチを使用してtypings.d.tsを取り除くことができます。そして、このような何かにあなたのWebPACKの設定を調整します。

なぜですか?

あなたのアプローチがうまくいかない理由はすぐにわかりませんでした。直感的には、それはappendTsSuffixToを使用するのと同等でなければならないようです。そこで、私はts-loaderを介してデバッグを行い、何が起こっていたのかを確認しました。

自分でresourcePathを変更した場合、ほとんどの場合はts-loader/dist/index.jsによく見えますが、ts-loader/dist/servicesHost.jsに問題が発生します。

具体的には、this.resourcePathをマイローダーで変更したときに、の返信undefinedが私のexample.schema.jsonファイルの場合に表示されます。しかし、appendTsSuffixToを使用すると正しく解決されます。

私は(または専門家)に貢献していないよts-loaderが、これが私の感想は、ローダでthis.resourcePathを変更する場合、あなたの.schema.jsonファイルが実際にコンパイルしますが、それがインポートされている場所に解決するために失敗するということです。実行するために、あなたのWebPACKのビルドを取得

その他の考慮事項

は一つのことです。 IDEで素敵な開発者体験を提供することは別のものです。これに関する詳細については、密接に関連した質問のthis answerを参照してください。役に立つサンプルコードについてはthis Github repoを参照してください。

関連する問題