Bootstrap 4的TypeScript类型定义无法编译 - 找不到模块'popper.js'。

16

我试图在Visual Studio Code中设置一个TypeScript项目,并让Bootstrap 4与Popper、jQuery和Knockout一起正常工作。

我安装了Knockout、jQuery和Bootstrap类型定义。

npm install -–save @types/knockout
npm install -–save @types/jquery
npm install --save @types/bootstrap

在 require.js 配置中引用了 JS 文件

declare var require: any;
require.config({
    paths: {
        "knockout": "externals/knockout-3.5.0",
        "jquery": "externals/jquery-3.3.1.min",
        "popper.js": "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js",
        "bootstrap": "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    }
})

我的tsconfig.json文件如下:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": { 
            "*": ["types/*"] 
        },
        "outDir": "./built/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "amd",
        "target": "es5"
    },
    "files":[
        "src/require-config.ts",
        "src/hello.ts"
    ]
}

我开始编译这个项目,但是出现了以下错误:

node_modules/@types/bootstrap/index.d.ts:9:25 - error TS2307: Cannot find module 'popper.js'.

9 import * as Popper from "popper.js";
                          ~~~~~~~~~~~

Found 1 error.

The terminal process terminated with exit code: 1

看起来我的Bootstrap类型定义文件编译失败,因为它找不到popper.js模块。

popper.js模块确实在我的@types文件夹中。

node_modules
 |-@types
 |  |- bootstrap
 |     |-index.d.ts (this is failing)
 |- popper.js
    |- index.d.ts (popper.js type definition)

我该如何告诉TypeScript编译器,bootstrap类型定义所寻找的popper.js位于更高层次结构中?

我甚至找不到任何与此相似的答案。所以,要么我碰巧遇到了其他人从未遇到过的错误(不太可能),要么作为Typescript的新手,我没有正确设置环境并错过了一个非常基本的设置步骤,而每个人都得到了这个步骤,因此没有人需要问(很可能)。

我该怎么办才能解决这个问题?

2个回答

20

有两个选项供您选择:

  • 删除 "module": "amd" 配置选项。
  • 添加 "moduleResolution": "node" 选项。

第二个选项的代码如下:

"moduleResolution": "node",
"module": "amd",
为什么这些选项可行? 简而言之,当我们使用 amd 模块时,默认的模块解析策略是 Classic,而不是 Node。两者之间的重要区别在于,Node 策略将目录名称视为模块,而 Classic 策略则不会。 有关 模块解析策略 的更多信息,请参见此处。

像这样的编程问题,应该不难解决。感谢您的询问。 - aszalacinski
你选择了哪个选项? - Shaun Luttin
2
第二个选项可行。感谢解释...永远保持学习的态度。 - aszalacinski
很棒的答案,它帮助我解决了我的bootstrap 4.3.1 popper.js 1.11问题。我添加了moduleResolution: node,编译错误消失了。 - Karl
1
moduleResolution:node 在 BS 4.3 和 popper 1.11 上工作良好 - 这已经持续数月,但最近在 VS2019 中突然失效。当事情一直在正常运作,却突然出现问题时,真的让人感到非常沮丧 :(。感谢你的修复。 - Tony Basallo

0

当我遇到这个问题时,这是我找到的第一个结果。

这个Github评论对我很有帮助。

这个库需要DOM库(浏览器环境)

您应该在tsconfig.json中的compilerOptions.lib中添加dom以及'es2017'。

我只需将"lib": [ "DOM" ]添加到我的tsconfig.json中,就可以让它为我工作,并且我仍然针对es5


1
对我无效,引导程序定义导入了 Popper,但普通的 @types 文件夹中不存在 Popper 定义... 更改库对此肯定不会有任何影响。 - Dan

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,