I need some extra light to be shed on the topic, maybe you could suggest some guide/article/etc., because I seem to be unable to build a proper phrase for Google anymore :-/
At the moment, I'm trying to make my JS modular. ES6, Webpack and so on. I think I don't have issues importing my own modules, like import Feature1 from './components/feature1
. I am also almost Ok with importing of all the 3rd-party stuff (that I need) when I have only one JS script working with all that.
Example:
import $ from 'jquery';
import moment from 'moment';
import daterangepicker from 'bootstrap-daterangepicker';
$('input').daterangepicker({ opts });
^^ this sample script works as expected.
In a real app, however, I have the following challenges:
- I want to keep it DRY and import some common stuff (let say jquery + bootstrap.js) in a kind of "bootstrap.js" file, which is hooked on all the webpages. While some other libs (like 'moment', 'bootstrap-daterangepicker') I would like to load from a page-specific script. Example:
index page:
<script src="bootstrap.js"></script> <!-- loads 'jquery' and 'bootstrap' -->
calendar page:
<script src="bootstrap.js"></script> <!-- loads 'jquery' and 'bootstrap' -->
<script src="calendar.js"></script> <!-- loads 'moment' and 'bootstrap-daterangepicker' -->
Some of JS code I use is "inlined" into HTML. Like:
$('[data-toggle="tooltip"]').tooltip();
, especially if I have some "variables", generated by PHP for injecting into JS.
In both cases it becomes a hell. I'm trying to import 'bootstrap-daterangepicker' int the 'calendar.js' -- it says it couldn't find jQuery. I'm trying to initiate tooltips from an inline -- it finds jQuery, but it's not the jQuery which has .tooltip() function (this one's from bootstrap) and so on it goes...
Internet if full of "hacks" and workarounds, some of them even help. What I need, however, is some higher level understanding on how to deal with libs like these in my apps. Because I have no slightest idea on what I'm doing, when I follow each of found hack/workaround.