typescript - 如何使用 webpack 将 json 模式动态加载到 typescript

Question

我有一个描述对象的 json 模式 Person .我希望能够通过这种方式将该模式直接加载到 typescript 文件中:

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

为此，我创建了一个加载器，将 json 文件转换为 typescript 接口(interface)声明(使用 json-schema-to-typescript )，然后将结果传递给 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 文件视为一个字符串:

声明.d.ts:

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;
}

但是，当我构建我的项目时，Person 未被识别为对象并且编译失败:

index.js

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

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

编译失败:

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

虽然我在声明中将 .schema.json 文件的导出定义为字符串，但我的加载器动态地将文件名 (this.resourcePath) 更改为 ts 文件，因此 ts-loader 应该将其视为标准 ts 文件并导出Person 对象。

我做错了什么？

Answer 1

使用appendTsSuffixTo

如果您使用 ts-loader 的 appendTsSuffixTo option，我认为您的设置会起作用，而不是在自定义加载程序中自己更改文件名。如评论中所述，您可能还需要调整导入或导出 Person 的方式。

使用 appendTsSuffixTo，您将从加载程序中删除 this.resourcePath = this.resourcePath + '.ts';(或类似代码)。然后将您的 webpack 配置调整为如下所示:

  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。

但为什么呢？

我不是很清楚为什么你的方法行不通；直觉上它似乎应该等同于使用 appendTsSuffixTo。所以我通过 ts-loader 调试了一下，看看发生了什么。

如果我自己修改 resourcePath，在 ts-loader/dist/index.js 中看起来很正常，但在 ts- 中开始出现问题loader/dist/servicesHost.js.

具体来说，我看到 resolveModuleName() 为我的 example.schema.json 文件返回 undefined 时，我只是更改 this。 resourcePath 在我的加载器中。但是，我看到它在使用 appendTsSuffixTo 时正确解析。

我不是 ts-loader 的贡献者(或专家)，但我的看法是，在加载器中修改 this.resourcePath 时，您的.schema.json 文件确实可以编译，但无论导入到哪里都无法解析。

其他注意事项

让你的 webpack 构建运行是一回事；在 IDE 中提供良好的开发人员体验是另一回事。参见 this answer到一个密切相关的问题以获得更多想法，以及this Github repo可能有用的工作示例代码。