Add Bootstrap js plugins to brunch-config.js to use as front-end assets?

Question

I want to use Bootstrap's alert.js plugin as a front-end asset, but can not figure out how to make it work using brunch-config.js and npm.

At the moment I have such brunch config (it adds jQuery and Bootstrap css to assets):

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    assets: /^(web\/static\/assets)/
  },

  paths: {
    watched: [
      "web/static",
      "test/static"
    ],

    public: "priv/static"
  },

  plugins: {
    babel: {
      ignore: [/web\/static\/vendor/]
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },

  npm: {
    enabled: true,
    whitelist: ["phoenix", "phoenix_html", "jquery", "bootstrap"],
    globals: {
      $: 'jquery',
      jQuery: 'jquery'
    },
    styles: {
      bootstrap: ['dist/css/bootstrap.css']
    }
  }
};

Plugin file is here - ./node_modules/bootstrap/dist/js/umd/alert.js.

One more thing: with this config Brunch actually does something and adds to /js/app.js the needed ./node_modules/bootstrap/dist/js/boostrap.js file which already contains the Alert plugin.

jQuery works properly, Bootstrap css works also. The only problem - Bootstrap js plugins (there are no warnings in console).

In my package.json I have this version of Bootstrap:

{
  "repository": {},
  "dependencies": {
    "babel-brunch": "~6.0.0",
    "bootstrap": "^4.0.0-alpha.2",
    "brunch": "~2.1.3",
    "clean-css-brunch": "~1.8.0",
    "css-brunch": "~1.7.0",
    "javascript-brunch": "~1.8.0",
    "jquery": "^2.2.3",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html",
    "uglify-js-brunch": "~1.7.0"
  }
}

Answer 1

Adding require("bootstrap"); to the end of app.js solved the problem for me. I'm far from understanding brunch / bootstrap properly, but AFAIK the javascript side of bootstrap is just a collection of plugins for jQuery. Requiring bootstrap adds the plugins to the global jQuery object (already presented in your brunch-config.js).