Bootstrap 4 TypeScript 类型定义编译失败 - 找不到模块 'popper.js'

Bootstrap 4 TypeScript Type Definition fails to compile - Cannot find module 'popper.js'

我正在尝试建立一个 TypeScript 项目并让 bootstrap 4 与 PopperjQuery[=42 一起工作=],以及 Visual Studio 代码中的 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 的新手,我没有正确设置我的环境并且错过了其他人都得到的非常基本的设置步骤,因此从来没有人问过(很有可能)。

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

两种选择:

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

第二个选项如下所示:

"moduleResolution": "node",
"module": "amd",

为什么这些选项有效?

简而言之,当我们使用amd模块时,默认的模块解析策略是Classic而不是Node。两者之间的重要区别在于 Node 策略将目录名称识别为模块,而 Classic 策略则不会。

module resolution strategies here 上有更多信息。

这是我遇到问题时得到的第一个结果。

This Github comment帮了我。

This library requires DOM library (browser environment)

You should add dom as well as 'es2017' to compilerOptions.lib in tsconfig.json.

我只是将 "lib": [ "DOM" ] 添加到我的 tsconfig.json 以使其对我有用,我仍然瞄准 es5