WebPack 中的 Typescript (at-loader) 编译器错误

Question

我正在使用 Visual Studio 2017 编写 Angular SPA，但我使用 WebPack 来运行它。目前我让 VS 将 Typescript 构建到 JS 中，WebPack 使用该 JS 来创建构建工件。

我想改用 WebPack 来构建 Typescript，这样我们的 CI 服务器就可以更轻松地构建项目。出于某种原因，VS 可以很好地编译 Typescript 但awesome-typescript-loader不能。

我的 Typescript 是使用 ES6 模块编写的，即

import * as angular from "angular";
import * as moment from "moment";
import "angular-material";

import { ExpensesService } from "../../main/components/reports/expenses/expenses.service";
import { IJourney } from "../../Interface/IJourney";

当我编译运行它时，我从 WebPack / Awesome-Typescript-Loader 收到这些错误。请注意，所有这些都在node_modules文件夹中，而不是我的代码（我能说出来吗？）

[at-loader] ./node_modules/@types/node/index.d.ts:32:11 TS2451 中的错误：无法重新声明块范围变量“错误”。

[at-loader] ./node_modules/@uirouter/angularjs/lib-esm/services.d.ts:9:9 TS2717 中的错误：后续属性声明必须具有相同的类型。属性“stateProvider”的类型必须为“StateProvider”，但此处的类型为“StateProvider”。

[at-loader] ./node_modules/awesome-typescript-loader/lib/runtime.d.ts:20:13 TS2403 中的错误：后续变量声明必须具有相同的类型。变量“require”必须是“NodeRequire”类型，但这里的类型是“WebpackRequire”。

[at-loader] ./node_modules/tsutils/src/typeguard.d.ts:140:70 TS2694 中的错误：命名空间“ts”没有导出成员“EnumLiteralType”。

[at-loader] ./node_modules/uri-js/src/punycode.d.ts:9:17 TS2714 中的错误：导出分配的表达式必须是环境上下文中的标识符或限定名称。

我的tsconfig.json（我强迫 VS 使用）是

{
    "compileOnSave": true,
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "lib": [ "es2015" ],
        "module": "commonjs",
        "moduleResolution": "node",
        "noImplicitAny": false,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es5"
    },
    "exclude": [
        "typings"
    ],
    "include": [
        "./src/**/*.ts",
        "node_modules/**/*.d.ts",
        "scripts/typings/d.ts"
    ],
    "files": [
        "./src/app/bootstrap.ts"
    ]
}

我不会复制packages.json在这里为简便起见，我包括所有适当的NPM包，即@types/angular，@types/angular-material等等。

在我的 WebPack.config 中，这里是相关设置

module.rules = {
    {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: ["awesome-typescript-loader"],
    },
}
resolve: {
    extensions: [".ts"],
    modules: [node_modules"]
},

Answer 1

在我的情况下，排除 intsconfig.json不起作用，因为它不适用于隐式编译，但如果明确需要，仍然会转到文件，exclude无论如何工作只是为了减少 include集合。

添加skipLibCheck到tsconfig.json解决了这个问题：

{
    "compilerOptions": {
        // ...
        "skipLibCheck": true,
    },
    // ...
}

注意：这是awesome-typescript-loader在 webpack中使用的。随着ts-loader我没有问题。