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

Posted 2023-03-13

【中文标题】WebPack 中的 Typescript (at-loader) 编译器错误

【英文标题】：Typescript (at-loader) compiler errors in WebPack

【发布时间】：2018-09-29 17:05:36

【问题描述】：

我正在使用 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"]
,

【问题讨论】：

我认为错误的原因是您正在编译定义文件，请尝试删除 tsconfig.json 中的"node_modules/**/*.d.ts" 和"scripts/typings/d.ts"。

@AmayaSan 非常感谢！请您写一个答案，以便我接受！

【参考方案1】：

错误的原因是你正在编译定义文件

修复它

删除 "node_modules/**/*.d.ts" 和 "scripts/typings/d.ts"

在 tsconfig.json 中将解决您的问题。

【参考方案2】：

在我的情况下，排除在 tsconfig.json 中不起作用，因为它适用于非隐式编译，但如果明确需要，仍然会转到文件，并且 exclude 无论如何都可以减少 include 设置。

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

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

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