Bootstrap 4 TypeScript类型定义无法编译-找不到模块'popper.js' [英] Bootstrap 4 TypeScript Type Definition fails to compile - Cannot find module 'popper.js'

问题描述

我正在尝试建立一个TypeScript项目，并在Visual Studio Code中与 Popper ， jQuery 和 Knockout 一起使用Bootstrap 4.

I am attempting to set up a TypeScript project and get bootstrap 4 working along with Popper, jQuery, and Knockout in Visual Studio Code.

我安装了剔除，jquery和bootstrap类型定义，

I installed the knockout, jquery and bootstrap type definitions,

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

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

referenced the JS files in a require.js config

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"
    ]
}

我去编译项目，但出现以下错误:

I go to compile the project and I get the following error:

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模块.

It appears my Bootstrap type definition file fails compilation as it cannot find the popper.js module.

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

The popper.js module is in my @types folder

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

如何告诉TypeScript编译器引导类型定义正在寻找的popper.js位于层次结构中的较高位置?

How do I tell the TypeScript compiler that the popper.js that the bootstrap type definition is looking for is located higher up in the hierarchy?

我什至无法找到任何答案.因此，或者我偶然发现了一个没人遇到过的错误(不太可能)，或者是我刚接触Typescript，我的环境设置不正确，并且错过了其他所有人都可以接受的非常基本的设置步骤，因此没有人可以不得不问(很有可能).

I haven't been able to find any answers even close to this. So, either I have stumbled across a bug no one else has ever run into (unlikely), or being new to Typescript, I have improperly set up my environment and missed a very basic setup step that everyone else gets and thus no one has ever had to ask (very likely).

该如何解决?

推荐答案

为您提供两个选择:

• 删除模块":"amd" 配置选项或
• 添加"moduleResolution":节点" 选项.

• remove the "module": "amd" configuration option OR
• add the "moduleResolution": "node" option.

第二个选项如下:

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

这些选项为什么起作用?

Why do these options work?

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

In short, when we use amd modules, the default module resolution strategy is Classic as opposed to Node. The important difference between the two is that the Node strategy recognizes directory names as modules whereas the Classic strategy does not.

有关此处的模块解析策略的详细信息.

这篇关于Bootstrap 4 TypeScript类型定义无法编译-找不到模块'popper.js'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！