awesome-typescript-loader 不获取 JSON 中的更改

Question

假设我有一些 JSON 文件（我们将其命名为 template.json）

{
    "myField1": "",
    "myField2": ""
}

我也有一种通用的class

export default GenericClass<T> {
    // Creating an empty constuctor with passed type.
    // to allow define type automatically.
    // This allow us not to manually set generic type for class
    // and also allows Webpack to pick up changes.
    constructor(template?: T) {} 

    // ...some fields and methods

    get typedField(): T {
        return /* something slightly calculated */
    }
}

我在我的 Typescript 项目中像使用类型一样使用它：

import GenericClass from "path/to/GenericClass"
import template from "template.json"

export type TemplateType = typeof template
export default new GenericClass(template)

// we can also write
//     export default new GenericClass<TemplateType>()
// but in this case the changes in template.json
// won't be picked up by Webpack.
// However, this does not affects the problem,
// it occurs in both cases.

我是运行 webpack 开发服务器，并在某处使用它：

import * as React from "react"
import GenericInstance from "path/to/GenericInstance"

export default MyComponent extends React.Component {
    render() {
        var { typedField } = GenericInstance
        return (
            <main>
                <p>{typedField.myField1} {/* ok */}</p>
                <p>{typedField.myField2} {/* ok */}</p>
            </main>
        )
    }
}

之后，我将在 template.json:

中添加一个新字段

{
    "myField1": "",
    "myField2": "",
    "myField3": ""   
}

正在保存。 webpack 开发服务器在 template.json 中获取此更改。好的。 一件重要的事情 是 VSCode 的自动完成功能（它在可用字段列表中显示此 myField3）。很好

此时，当我尝试在MyComponent中使用myField3（如<p>{typedField.myField3}</p>）时，awesome-typescript-loader在编译期间发送错误：

Property 'myField3' does not exist on type '{ "myField1": string; "myField2": string; }'

显然，awesome-typescript-loader 没有获取 template.json 中的更改，它用作我的 GenericClass.

中的类型

我怎么打败它？重新启动开发服务器后，它工作正常，直到我在 template.json.

中进行更改

部分 webpack.config.js、package.json 和 tsconfig.json

config = {
    rules: {
        {
            test: /\.tsx?$/,
            loader: "awesome-typescript-loader",
            exclude: /node_modules/
        },
        {
            enforce: "pre",
            test: /\.js$/,
            loader: "source-map-loader"
        },
    }
}

{
    "devDependencies": {
        "awesome-typescript-loader": "^5.2.1",
        "source-map-loader": "^0.2.4",
        "typescript": "^3.3.3",
        "webpack": "^4.29.3",
        "webpack-cli": "^3.2.3",
        "webpack-dev-server": "^3.1.14"
    }
}

{
    "compilerOptions": {
        "module": "esnext",
        "target": "es5",
        "moduleResolution": "node",
        "baseUrl": "src",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": true,
        "strict": false,
        "sourceMap": true,
        "outDir": "dist/",
        "jsx": "react",
        "traceResolution": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "allowJs": true,
        "declaration": false,
        "removeComments": true,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true,
        "types": [ "node" ],
        "lib": ["es6", "dom", "dom.iterable"],
        "downlevelIteration": true,
        "resolveJsonModule": true,
        "typeRoots": [
            "./node_modules/@types"
        ]
    },
    "include": [
        "src/**/*"
    ]
}

更新

我可以确认只有导入 *.json 才会出现这种情况。问题可能与 TypeScript 的 resolveJsonModule 设置有关，但不确定。为 webpack.config.js 中的 awesome-typescript-loader 显式地将 useCache 和 usePrecompiledFiles 设置为 false 没有帮助。我的意思是，更改后的 webpack.config.js 现在看起来像：

{
    test: /\.(t|j)sx?$/,
    loader: "awesome-typescript-loader",
    options: {
        useCache: false,
        usePrecompiledFiles: false
    },
    exclude: /node_modules\/(?!superagent)/,
},

Answer 1

这是 awesome-typescript-loader 中的错误。从 v5.2.1 开始，这里有一个快速修复：

// node_modules/awesome-typescript-loader/dist/instance.js

// ln: 214:
- var EXTENSIONS = /\.tsx?$|\.jsx?$/;
+ var EXTENSIONS = /\.tsx?$|\.jsx?|\.json$/;

显然作者忘记将 .json 扩展名作为有效目标。

awesome-typescript-loader 不获取 JSON 中的更改

awesome-typescript-loader does not pick up changes in JSON

json

typescript

webpack

webpack-dev-server

awesome-typescript-loader

更新