网站搜索

Typescript、index.d.ts 和 webpack：未找到模块错误

我按照这个教程使用 webpack 创建了一个 Typescript 项目。由于我有很多模块，我在 src/components 文件夹中添加了 index.d.ts，在其中导出我所有的模块：

export {Module1} from "./Module1";
export {Module2} from "./Module2";
export {Module3} from "./Module3";

我将 index.d.ts 添加到 tsconfig.json 文件中：

"files": [
    "./src/components/index.d.ts"
]

然后，在位于 src 文件夹中的 index.tsx 中，我导入：

import * as MyModule from "./components/";

代码提示正常工作，所以我认为所有路径都是正确的。然而，当我运行 webpack 时，我收到这个错误：

未找到模块：错误：无法解析目录 './components'

据我所知，webpack 找不到这个 index.d.ts 文件。我尝试按照这里的描述在 webpack.config.js 的 extensions 中添加 d.ts，但随后我得到了一个不同的错误消息。我是不是漏掉了什么？

答案＃1

对我来说，我最终将它从 './types' 改成了 './types.d'。

所以类型导入看起来会像这样，

import {
    TSomeType,
    ISomeInterface,
    ESomeEnum
} from 'src/types/components/SomeComponent/types.d'

而不是

import {
    TSomeType,
    ISomeInterface,
    ESomeEnum
} from 'src/types/components/SomeComponent/types'

摘自此评论：

我可以确认这个问题，@Draccoz @filipesilva。

当你将文件名从 .d.ts 改为 .ts 时，这种情况不会发生。当你将导入从 import { Something } from 'yourlib'; 改为 import { Something } from 'yourlib.d'; 时，也不会发生这种情况。

我刚刚把一个正在运行的项目从 webpack-starter 模板（TypeScript/Angular）迁移到 CLI，然后遇到了这个错误，所以我认为这与生成的 CLI 项目有关。

我正在使用 @angular/cli: 1.0.0-rc.2

我认为同样值得注意的是 tsx 文件也能正常工作。我只需要把 types 改成 types.d 才是针对 ts 文件的。

答案＃2

想出一个解决方案，使用 index.ts 进行所有导出，而不是 index.d.ts。

相关文章