My colleague in the office was adamant about purchasing a stunning HTML/CSS/JS external template
to serve as a foundational design for our website project. This particular website is a significant endeavor that we are constructing using Laravel
, SASS
, and ES6
with the aid of Webpack
.
The template we acquired offers a comprehensive range of features developed in SASS
and ES5
JavaScript.
I find it easy to work with the provided SASS
and make adjustments because I also am familiar with it, but I'm encountering some difficulties with the Javascript portion.
In the initial phase, I am utilizing files from the downloaded template:
- core.min.js
- script.js
script.js comprises approximately 1k lines of non-minified code containing elements like this:
plugins = {
bootstrapTooltip: $("[data-toggle='tooltip']"),
bootstrapModalDialog: $('.modal'),
captcha: $('.recaptcha'),
rdNavbar: $(".rd-navbar"),
wow: $(".wow"),
owl: $(".owl-carousel"),
swiper: $(".swiper-slider"),
counter: $(".counter"),
twitterfeed: $(".twitter"),
isotope: $(".isotope"),
viewAnimate: $('.view-animate'),
selectFilter: $(".select2"),
rdInputLabel: $(".form-label"),
bootstrapDateTimePicker: $("[data-time-picker]"),
customWaypoints: $('[data-custom-scroll-to]'),
stepper: $("input[type='number']"),
radio: $("input[type='radio']"),
checkbox: $("input[type='checkbox']"),
customToggle: $("[data-custom-toggle]"),
regula: $("[data-constraints]"),
search: $(".rd-search"),
searchResults: $('.rd-search-results'),
copyrightYear: $(".copyright-year"),
materialParallax: $(".parallax-container"),
dateCountdown: $('.DateCountdown'),
flickrfeed: $(".flickr"),
responsiveTabs: $(".responsive-tabs")
};
// [...]
if (plugins.copyrightYear.length) {
plugins.copyrightYear.text(initialDate.getFullYear());
}
// [...]
core.min.js houses numerous JS dependencies, appearing like this:
/**
* @module jQuery Migrate
* @author jQuery Foundation and other contributors
* @see https://code.jquery.com/jquery/
* @license MIT
* @version 3.0.0
*/
"undefined"==typeof jQuery.migrateMute&&(jQu[...]
/**
* @module jQuery Cookie Plugin
* @see https://github.com/carhartl/jquery-cookie
* @license MIT
*/
!function(e){"function"==typeof define&&de
This pattern continues with around 30 more libraries!
Proceeding into the next phase, I incorporate my own files primarily consisting of ES6 modules
.
The issue arises when some of the libraries used by the template overlap with those utilized in my ES6 modules
, resulting in duplicate imports (once in core.min.js
, and once in the ES6 webpack bundle). For instance, jQuery is employed in script.js
(via window
) and in ES6 modules (via imports
). Occasionally, differing versions of the same library may even be encountered!
To address this concern, I initiated the creation of a vendor.js
file wherein all common libraries are imported and set within the window
:
import $ from 'jquery';
import moment from 'moment';
import 'bootstrap';
window.$ = window.jQuery = $;
window.moment = moment;
However, I am apprehensive that this practice is not optimal and fails to resolve issues with certain libraries such as DataTables, which prove complicated to initialize within a globally scoped jQuery object, among others. Moreover, not all libraries can be handled in this manner, particularly those absent in npm/yarn
..
I find myself uncertain on how to cope with these complexities. Is there a proficient way to manage legacy components effectively while upholding a functional ES6 structure? Or should I consider abandoning the purchased template altogether?