Question

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

我想转移到构建Typescript的WebPack，以便我们的CI服务器更容易构建项目。出于某种原因，VS可以编译Typescript，但awesome-typescript-loader不能。

My 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：无法重新声明块范围变量'Error'。

[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

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

修复它

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

tsconfig.json 中的

将解决您的问题。

Answer 2

在我的情况下，排除tsconfig.json并不起作用，因为它适用于非隐式编译，但是如果明确需要，则仍然转到文件，而exclude仍然对有效减少 include集。

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

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

注意：这是在Webpack中使用的awesome-typescript-loader。使用ts-loader，我没有任何问题。

WebPack

2 个答案: