angularjs - WebPack 中的 Typescript(加载程序)编译器错误

Question

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

我想转向构建 Typescript 的 WebPack，这样我们的 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 文件夹中，而不是我的代码(我能看出来吗？)

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:32:11 TS2451: Cannot redeclare block-scoped variable 'Error'.

ERROR in [at-loader] ./node_modules/@uirouter/angularjs/lib-esm/services.d.ts:9:9 TS2717: Subsequent property declarations must have the same type. Property 'stateProvider' must be of type 'StateProvider', but here has type 'StateProvider'.

ERROR in [at-loader] ./node_modules/awesome-typescript-loader/lib/runtime.d.ts:20:13 TS2403: Subsequent variable declarations must have the same type. Variable 'require' must be of type 'NodeRequire', but here has type 'WebpackRequire'.

ERROR in [at-loader] ./node_modules/tsutils/src/typeguard.d.ts:140:70 TS2694: Namespace 'ts' has no exported member 'EnumLiteralType'.

ERROR in [at-loader] ./node_modules/uri-js/src/punycode.d.ts:9:17 TS2714: The expression of an export assignment must be an identifier or qualified name in an ambient context.

我的 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

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

将skipLibCheck 添加到tsconfig.json 解决了问题:

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

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