如何配置 webpack 和 Typescript 以排除解析特定的仅键入包？答案

【问题标题】：How to configure webpack and Typescript to exclude resolving a specific typing-only package?如何配置 webpack 和 Typescript 以排除解析特定的仅键入包？
【发布时间】：2019-09-23 23:25:27
【问题描述】：

我只使用 @types/aws-lambda 的类型包在我的代码中进行类型声明。我没有使用它的实际包，只是它的类型。

在我的代码中，我仍然会像导入普通模块一样导入类型，如下所示：

import { APIGatewayEvent } from 'aws-lambda';

const myApi: APIGatewayEvent = someEvent;

但是，当我尝试通过 webpack 编译时，我得到一个错误：

Module not found: Error: Can't resolve 'aws-lambda' in....

这是 webpack 或 Typescript 尝试解析模块的问题吗？如何配置 webpack 和 tsconfig 以排除尝试解析 aws-lambda 在我的情况下这只是解决错误的类型？

【问题讨论】：

APIGatewayEvent 的用法被拼写为 ApiGatewayEvent。我假设这与您的问题无关？
修正错字后，您提供的代码似乎对我有用。你的 webpack 配置中是否有特定的东西，tsconfig 或者这个包是否依赖于 another 包（对等依赖？）？
@skovy Ahh...感谢您编辑我的错字。不过，我的代码中没有那个错字。我不确定这个包是否有任何对等依赖，但我只是意识到当我不声明和使用我自己的装饰器时我不会收到这个错误。当我声明我的装饰器时，除了它的类型之外，它也没有使用这个包，就会发生错误。
aws-lambda 是您在src 目录中创建的文件吗？如果是这样，您需要包含文件的路径。 import { APIGatewayEvent } from './path/to/file/aws-lambda';
@automasean aws-lambda 是来自 npm 的一个包。但是我只安装了它的@types 包而没有实际的包，因为我只需要它的类型。

标签： javascript typescript webpack

【解决方案1】：

尝试将 webpack 配置为 resolve .ts extensions。

module.exports = {
  //...
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
};

还要确保您拥有正确的TypeScript integration configuration。

您还可以仔细检查您的 tsconfig.json 文件。如果您明确设置typeRoots，那么您需要包含"./node_modules/@types"。

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types

如果指定了 typeRoots，则只包含 typeRoots 下的包

【讨论】：

谢谢，但这仍然不起作用。我仍然遇到同样的错误。

【解决方案2】：

在打字稿中，首先，你需要告诉 tsc 编译器，这是一个新模块。为此，您需要添加 declare 关键字。而且，在这种情况下，您使用 aws-lambda 作为实时 IntelliSense 的接口。为此，您需要添加 typeof 关键字。像这样

import { APIGatewayEvent } from 'aws-lambda';

declare const myApi: typeof APIGatewayEvent

【讨论】：