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

typescript JS

1个回答

写回答

JRmondler

2025-08-21 23:00

+ 关注

typescript

在使用Bootstrap 4和typescript进行开发时，有时候会遇到编译错误，提示找不到模块“popper.JS”。这个问题通常是由于缺少相关的依赖或者配置问题导致的。本文将介绍如何解决这个问题，并提供相应的案例代码。

什么是Bootstrap 4和typescript?

Bootstrap是一个流行的前端框架，它提供了一套用于开发响应式和移动优先的网站和应用程序的工具和组件。它能够快速地构建出漂亮而且功能强大的界面，让开发者能够更加专注于业务逻辑。

typescript是一种由微软开发的编程语言，它是JavaScript的超集，添加了静态类型和面向对象的特性。通过使用typescript，开发者可以在开发过程中提前发现错误，并且能够更好地进行代码重构和维护。

解决找不到模块“popper.JS”问题

在使用Bootstrap 4和typescript进行开发时，有时候会遇到编译错误，提示找不到模块“popper.JS”。这个问题通常是由于缺少相关的依赖或者配置问题导致的。

要解决这个问题，我们需要进行以下几个步骤：

1. 确保已经安装了Bootstrap和popper.JS的依赖。可以通过运行以下命令来安装：

npm install bootstrap popper.JS

2. 在typescript文件中添加对Bootstrap和popper.JS的引用。可以在需要使用Bootstrap的文件中添加以下代码：

typescript
import 'bootstrap';
import 'popper.JS';

3. 确保typescript的配置文件（tsconfig.JSon）中包含了必要的配置。可以在该文件中添加以下内容：

JSon
{
  "compilerOptions": {
    "module": "commonJS",
    "target": "es5",
    "lib": ["es6", "dom"],
    "types": ["bootstrap", "popper.JS"]
  }
}

4. 重新编译项目，并确保没有报错信息。可以使用以下命令来重新编译项目：

tsc

示例代码

下面是一个使用Bootstrap 4和typescript的示例代码：

html
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 4 typescript</title>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/CSS/bootstrap.min.CSS">
</head>
<body>
  <div class="contAIner">
    <h1>Hello, Bootstrap 4!</h1>
    <button class="btn btn-primary" onclick="showAlert()">Click me</button>
  </div>
  <script src="https://code.jquery.com/jquery-3.4.1.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/popper.JS/1.14.7/umd/popper.min.JS"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/JS/bootstrap.min.JS"></script>
  <script>
    function showAlert() {
      alert('Hello, Bootstrap 4!');
    }
  </script>
</body>
</html>

在这个示例代码中，我们引入了Bootstrap 4的CSS和JavaScript文件，并在页面中添加了一个按钮和一个点击事件。点击按钮时，会弹出一个提示框。

在使用Bootstrap 4和typescript进行开发时，可能会遇到找不到模块“popper.JS”的编译错误。通过确保安装了相关的依赖、添加必要的引用和配置，我们可以解决这个问题。希望本文能够帮助到遇到类似问题的开发者们。

举报有用（4）分享收藏

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

1个回答

JRmondler

热门话题

相关问题