在 HTML5 中导入 Bootstrap js 文件

Question

问题

如何在不使用 node/express 的情况下将 Bootstrap 从我的 node_modules/ 导入 js 文件？

介绍

我已经在我的 Yarn monorepo 中安装了 Bootstrap5，因为我不想使用 CDN，并且我认为如果我在 node_modules/ 中拥有所有引导程序 package，则使用 SASS 配置会更灵活。

纱线添加引导@popperjs/core

编译 Bootstrap scss 并将其与我的自定义样式表合并后，我创建了以下 html 代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Company</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img
            src="../assets/images/logo/logo-transparent.png"
            alt="Company"
            width="40"
            height="40"
          />
        </a>

        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
          <div class="navbar-nav">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
            <a class="nav-link" href="#">About</a>
            <a class="nav-link" href="#">Careers</a>
            <a class="nav-link" href="#">Contact</a>
          </div>
        </div>
      </div>
    </nav>
  </body>
</html>

如何在不使用 CDN 的情况下包含 Bootstrap JS 模块？

在 Bootstrap 的官方文档中，它说我们可以导入所有 JavaScript 的东西：

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
  crossorigin="anonymous"
></script>

但是...由于我通过 Yarn 将 Bootstrap 添加到我的项目中（仅用于自定义样式），因此我想创建自己的 script.js 文件以从node_modules导入所有内容：

索引.html：

<script type="module" src="js/main.js"></script>

js/main.js

import "bootstrap/dist/js/bootstrap.min.js"; // Just import everything from bootstrap

但我收到错误：

未捕获的类型错误：无法解析模块说明符“引导程序”。 相对引用必须以“/”、“./”或“../”开头。

此外，在 index.html 内部，如果我这样做：

<script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

它工作正常，但我不喜欢../../../node_modules/ 。 我该如何处理？

--注意：我没有在我的项目中使用 node/express，只是 HTML、JavaScript 和 SCSS。

Answer 1

您可以从 CDN 服务器下载引导文件，并将其与项目的 rest 一起提供。 这样您就不会依赖 CDN 或节点/节点模块。

在 HTML5 中导入 Bootstrap js 文件

问题描述

问题

介绍

如何在不使用 CDN 的情况下包含 Bootstrap JS 模块？

1 个解决方案

解决方案1
1 已采纳 2022-07-01 19:02:56

在 HTML5 中导入 Bootstrap js 文件

问题描述

问题

介绍

如何在不使用 CDN 的情况下包含 Bootstrap JS 模块？

1 个解决方案

解决方案1 1 已采纳 2022-07-01 19:02:56

解决方案1
1 已采纳 2022-07-01 19:02:56