title: How to import jQuery then use it in other module imported after it?
body: <p>So I'm not sure if what I'm asking is possible that way.</p>
  
  <p>I have a Gulp task which us <code>gulp-bro</code> to import module and mix them.</p>
  
  <pre><code>function restaurantScripts() {
      return gulp.src(paths.restaurant.scripts.src)
          .pipe(sourcemaps.init({loadMaps: true}))
          .pipe(bro({
              transform: [
                babelify.configure({ presets: ['es2015'] }),
                [ 'uglifyify', { global: true } ]
              ]
          }))
          .pipe(rename({
              basename: 'restaurant',
              suffix: '.min'
          }))
          .pipe(sourcemaps.write('./'))
          .pipe(gulp.dest(paths.restaurant.scripts.dest));
  }
  </code></pre>
  
  <p>The pointed src look like this :</p>
  
  <pre><code>import './modules/bootstrap.js'
  import './modules/navbar.js'
  ...
  </code></pre>
  
  <p>In the <code>bootstrap.js</code> I import jQuery and my other vendor.</p>
  
  <pre><code>window.$ = window.jQuery = require('jquery')
  window.toastr = require('toastr')
  ...
  </code></pre>
  
  <p>Until there it's okay AND I can use jQuery on my website</p>
  
  <p>But this is where it does not work anymore. When I call my personnal module like <code>navbar.js</code> which looks like this :</p>
  
  <pre><code>var navbar = document.getElementsByClassName('nav-bot')[0];
  var sticky = navbar.offsetTop;
  
  function navbarSticky() {
      if (window.pageYOffset &gt;= sticky) {
          navbar.classList.add("sticky")
      } else {
          navbar.classList.remove("sticky");
      }
  }
  
  window.onscroll = function() {
      navbarSticky()
  };
  </code></pre>
  
  <p>It does not work anymore telling me :</p>
  
  <blockquote>
    <p>TypeError: navbar is undefined</p>
  </blockquote>
  
  <p>So obviously I'm missing something there. I think maybe I don't have the right to load my own modules like this. But if not what is the good way to do so pls?</p>