Created by: FezVrasta
This PR aims to fix the dependencies problem of Bootstrap and its dependencies.
With the changes proposed in this PR, both the "vanilla" and the webpack/rollup approaches will work out of the box without any additional configuration.
Example of vanilla usage:
<!DOCTYPE html>
<head>
<title>Bootstrap test</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
Example of webpack usage:
<!-- index.html -->
<!DOCTYPE html>
<head>
<title>Bootstrap test</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<script src="./bundle.js"></script>
</body>
// index.js
import $ from 'jquery';
import 'bootstrap';
$(function() {
$('[data-toggle="tooltip"]').tooltip();
});
// webpack.config.js
module.exports = {
entry: './index.js',
output: {
filename: './bundle.js',
},
resolve: {
modules: [`${__dirname}/node_modules`],
},
};