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?