Skip to content
GitLab

fix(build): Use UMD and fix build to properly load deps

Merged Administrator requested to merge github/fork/FezVrasta/v4-dev-dist-fix into v4-dev

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`],
  },
};