title: Confusing setup of a downloaded website template with a webpack ES6 project
body: <p>My boss coworker insisted to buy a beautiful <code>HTML/CSS/JS external template</code> to use it as a base design for a website. This website is a big project which we develop using <code>Laravel</code>, <code>SASS</code> and <code>ES6</code> through <code>Webpack</code>.</p>
  <p>The template we bought provides a complete set of features developed in <code>SASS</code> and <code>ES5</code> JS.
  I have no trouble using the provided <code>SASS</code> and editing it because I also uses it, but I'm quite stuck with the Javascript part.</p>
  <p>In the first part, I use files from the downloaded template:</p>
  <ul>
  <li>core.min.js</li>
  <li>script.js</li>
  </ul>
  <p><strong>script.js</strong> contains around 1k not minified lines with things like this:</p>
  <pre><code>plugins = {
      bootstrapTooltip: $(&quot;[data-toggle='tooltip']&quot;),
      bootstrapModalDialog: $('.modal'),
      captcha: $('.recaptcha'),
      rdNavbar: $(&quot;.rd-navbar&quot;),
      wow: $(&quot;.wow&quot;),
      owl: $(&quot;.owl-carousel&quot;),
      swiper: $(&quot;.swiper-slider&quot;),
      counter: $(&quot;.counter&quot;),
      twitterfeed: $(&quot;.twitter&quot;),
      isotope: $(&quot;.isotope&quot;),
      viewAnimate: $('.view-animate'),
      selectFilter: $(&quot;.select2&quot;),
      rdInputLabel: $(&quot;.form-label&quot;),
      bootstrapDateTimePicker: $(&quot;[data-time-picker]&quot;),
      customWaypoints: $('[data-custom-scroll-to]'),
      stepper: $(&quot;input[type='number']&quot;),
      radio: $(&quot;input[type='radio']&quot;),
      checkbox: $(&quot;input[type='checkbox']&quot;),
      customToggle: $(&quot;[data-custom-toggle]&quot;),
      regula: $(&quot;[data-constraints]&quot;),
      search: $(&quot;.rd-search&quot;),
      searchResults: $('.rd-search-results'),
      copyrightYear: $(&quot;.copyright-year&quot;),
      materialParallax: $(&quot;.parallax-container&quot;),
      dateCountdown: $('.DateCountdown'),
      flickrfeed: $(&quot;.flickr&quot;),
      responsiveTabs: $(&quot;.responsive-tabs&quot;)
  };
  
  // [...]
  
  if (plugins.copyrightYear.length) {
      plugins.copyrightYear.text(initialDate.getFullYear());
  }
  // [...]
  </code></pre>
  <p><strong>core.min.js</strong> contains tons of JS dependencies, it looks like this:</p>
  <pre><code>/**
   * @module       jQuery Migrate
   * @author       jQuery Foundation and other contributors
   * @see          https://code.jquery.com/jquery/
   * @license      MIT
   * @version      3.0.0
   */
  &quot;undefined&quot;==typeof jQuery.migrateMute&amp;&amp;(jQu[...]
  
  /**
   * @module       jQuery Cookie Plugin
   * @see          https://github.com/carhartl/jquery-cookie
   * @license      MIT
   */
  !function(e){&quot;function&quot;==typeof define&amp;&amp;de
  </code></pre>
  <p>And so on for maybe 30 more libraries!</p>
  <p>And in the second part, I use my own files which mainly are <code>ES6 modules</code>.</p>
  <p>The problem is that some of the libraries used by the template are also used in my <code>ES6 modules</code>, so it ends with getting the same libs <strong>imported multiple times</strong> (once in <code>core.min.js</code>, once in ES6 webpack bundle). For example, <strong>jQuery</strong> is used in <code>script.js</code> (through <code>window</code>) and in ES6 modules (through <code>imports</code>). And sometimes I have different versions of the same lib!</p>
  <p>So what I began to do is creating a <code>vendor.js</code> file and imported all libs in common and set them on <code>window</code> :</p>
  <pre><code>import $ from 'jquery';
  import moment from 'moment';
  import 'bootstrap';
  
  window.$ = window.jQuery = $;
  window.moment = moment;
  </code></pre>
  <p>But, I think that's quite a bad practice, and also it's not enough and it leads to errors with some libraries. For example DataTables which is tricky to initialize on a global scoped jQuery object and more. Moreover, I can't do that with all libraries, and some of them do not exist in <code>npm/yarn</code>..</p>
  <p>I don't know how to deal with this stuff, Is there a way to handle all the legacy stuff properly while keeping a working ES6 structure? Or should I stop using the downloaded template completely?</p>