Script loading order

Question

I use RequireJS to declare the dependencies that I need in my project. I configured RequireJS to download jQuery. However, for some reason, the browser gives errors that jQuery is not defined (Bootstrap.js needs jQuery).

<script type="text/javascript" src="./modules/requirejs/require.js" data-main="./js/main.js"></script>
<script src="js/bootstrap.js"></script>

Is this because requireJS loads dependencies asynchronously, so what can this happen after bootstrap.js loads?

Answer 1

if (typeof jQuery === 'undefined') {
  throw new Error('Bootstrap\ JavaScript requires jQuery')
}

Bootstrap only validates jQuery globally. When the browser tries to load Bootstrap, jQuery may not exist yet because RequireJS loads the modules asynchronously.

Bootstrap AMD. , RequireJS Bootstrap, jQuery, paths shim config. paths , shim RequireJS .

paths: {
  // We tell RequireJS that `bootstrap` module is this file
  bootstrap: 'path/to/bootstrap.js'
},
shim: {
  // We tell RequireJS that `bootstrap` will need `jquery` loaded first
  bootstrap: {
    deps: ['jquery'],
  },
}

main.js bootstrap .