Bootstrap 5 ReferenceError：未定义引导程序

Question

我刚刚完成安装 bootstrap 5 版本^5.0.0-alpha1并导入 bootstrapapp.js

import "bootstrap"

其他.js

var myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();

当我运行代码时，它给我错误ReferenceError: bootstrap is not defined。

然后我尝试像这样在other.js 中导入引导程序

import bootstrap from "bootstrap"

但是当我运行npm run dev错误时“在‘​​bootstrap’中找不到导出‘默认’（导入为‘引导程序’）

如果我像import { Modal } from "bootstrap"这样手动导入模态会给我错误“TypeError：非法调用”

Answer 1

Bootstrap 5.1 + webpack 5：

app.js

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

或者如果您只需要模态：

import * as bootstrap from 'bootstrap';
window.Modal = bootstrap.Modal;

然后你可以使用other.js像：

var myModal = new Modal(document.getElementById('myModal'));
myModal.show();

Answer 2

如果有人试图与 webpack 一起使用，这个解决方案对我有用。

window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js');

Answer 3

对于工作的我来说

在应用程序/javascript/packs/application.js

window.bootstrap = require('bootstrap');

Answer 4

如果您使用：

    import { Modal } from 'bootstrap'

那么要使用的语法将是：

    let myModal = new Modal(document.getElementById('myModal'));
    myModal.show();

为我工作，使用Vite和 bootstrap-5.0.0-beta1进行相对简单的设置。

Answer 5

在 app.js 之后

import 'bootstrap';

插入这两行

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;