Bootstrap 和 browserify 问题来自 2 个捆绑包

Question

I have a web page with 2 Javascript files, one which is common to all the pages (bundle) and the other one is page-specific thispagespecific.js .

In both of them, I must include file bootstrap.js because it is not global and I make use of modal in both of them.

It seems to work without any errors in console but bootstrap component stops working at some point: collapse triggers well, but I can't hide after.
First, one bootstrap is executed and the is the other so it will be visible again.

I am thinking about putting Bootstrap global, but I don't know if that is the right way.

Any help? thanks!

HTML

 <script src="../js/bundle.js"></script>
 <script src="../js/thisPageSpecific.js"></script>

main.js ( bundle.js after browserfy)

var $ = require('jquery');
var bootstrap = require('bootstrap/dist/js/bootstrap.bundle.min.js');
//... more requires
$('#menu').modal('show');
//... more code

thisPageSpecific.js

var $ = require('jquery');
var bootstrap = require('bootstrap/dist/js/bootstrap.bundle.min.js');
$('#pagespecificid').modal('show');
//... more code

Answer 1

At the end i was able to fix my issue whit making bootstrap global and only calling one time.

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

This makes global and call boottrap on all pages or even console works.

Maybe is there a cooler solution but.... this works at least for me.