导入 bootstrap js 文件

Question

I recently started using bootstrap installed from npm and i have trouble importing the js file though我最近开始使用从 npm 安装的引导程序，但我在导入 js 文件时遇到了问题

this is my main js file and where i want to use all the tools这是我的主要 js 文件，我想在其中使用所有工具

import * as bootstrap from '../node_modules/bootstrap/dist/js/bootstrap.min.js';

console.log(bootstrap);控制台日志（引导程序）；

my main.html file (where i put my js file)我的 main.html 文件（我放 js 文件的地方）

<script src="Js/js_main.js" type="module"></script>

When i run my page the tools/plugins dosen't work so... Is there a way to save this tools/plugins into your own js file like sass?当我运行我的页面时，工具/插件不起作用，所以...有没有办法将此工具/插件保存到您自己的 js 文件中，如 sass？ or which is the best way to use them?或者哪种是使用它们的最佳方式？

Answer 1

As I understood this.据我了解。 You are using bootstrap via npm to create html and js page.您正在通过 npm 使用引导程序来创建 html 和 js 页面。 you trying to get object of bootstrap js file that is not appropriate approach bcos it does not return anything.您试图获取不合适的引导 js 文件的 object，因为它不返回任何内容。 You can use absolute path in of "../node_modules/bootstrap/dist/js/bootstrap.min.js" in your html page so all its required script would available in your html page您可以在 html 页面中使用“../node_modules/bootstrap/dist/js/bootstrap.min.js”中的绝对路径，以便在您的 html 页面中使用其所有必需的脚本

<!doctype html>
<html lang="en">
<head>
    <title>Starter Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <!-- Custom styles for this template -->
    <style>
        body {
            padding-top: 5rem;
        }
        .starter-template {
            padding: 3rem 1.5rem;
            text-align: center;
        }
    </style>
</head>
<body>
 <!--MAIN HTML LAYOUT-->
</body>
</html>

Answer 2

Actually now in Bootstrap 5 is possible import the esm version of Bootstrap like that for example (code in the src/index.js file and node_modules folder on the same level of the js folder):实际上现在在 Bootstrap 5 中可以像这样导入 esm 版本的 Bootstrap（代码在 src/index.js 文件和与 js 文件夹同一级别的 node_modules 文件夹中）：

import * as bootstrap from '../node_modules/bootstrap/dist/js/bootstrap.esm.min.js'

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')

const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

In this way there is a problem with the path of Popper.js dependency.这样Popper.js依赖的路径就有问题了。 You can open the bootstrap.esm.min.js and replace the import of Popper with:您可以打开 bootstrap.esm.min.js 并将 Popper 的导入替换为：

import * as Popper from '../../../@popperjs/core/dist/esm/index.js'

The advantage in this way is that I can import only the component I want namely:这种方式的优点是我可以只导入我想要的组件，即：

import {Popover} from '../node_modules/bootstrap/dist/js/bootstrap.esm.min.js'从 '../node_modules/bootstrap/dist/js/bootstrap.esm.min.js' 导入 {Popover}

but remember that each import is an http request thereby you have to use webpack for example and in that case becomes more simple handle the project (in a different slightly different way from here).但请记住，每次导入都是一个 http 请求，因此您必须使用 webpack 作为示例，在这种情况下处理项目变得更加简单（与此处的方式略有不同）。

导入 bootstrap js 文件

问题描述

2 个解决方案

解决方案1
0 2021-03-29 07:16:13

解决方案2
0 2023-01-05 17:48:35

导入 bootstrap js 文件

问题描述

2 个解决方案

解决方案1 0 2021-03-29 07:16:13

解决方案2 0 2023-01-05 17:48:35

解决方案1
0 2021-03-29 07:16:13

解决方案2
0 2023-01-05 17:48:35