So I have seen multiple examples of how to include jQuery in the global namespace using webpack. I have seen code using the ProviderPlugin, imports-loader, and even a couple of other methods.
However, my JS code is going to be running on client web pages so I do not want my version of jQuery to override theirs. Is there way to have webpack include jQuery as a local variable to my JS via noConflict?
Related
I have a client who had a very complex jQuery app custom built by a previous developer within his WordPress site. Its functionality is cleanly broken out into several scripts which get minified together with the libraries they depend on. The libraries rely on an old version of jQuery (3.3.1). The site is complex and we need to be able to use the current version of jQuery to allow other plugins we're using to continue to keep up with upgrades.
The libraries include c. 2018 versions of:
Select2
Isotope
SpriteSpin
EasyResponsiveTabs
ImagesUploaded
jQuery Viewport
Some of these are minified/uglified.
I've used best practices to load jQuery 3.3.1 into a variable jQuery3_3_1 with noconflict();
It's rather easy to change standard jQuery to use jQuery3_3_1. But I need a way to force the libraries to use jQuery3_3_1, otherwise they are not recognized by the scripts (and some of them will have issues using a different version of jQuery than they were built in). Most of these use requireJs(), and I've seen instructions for setting up requirejs.config() code in the footer that will define "jquery" to be a particular version. Doing this would be a great solution, but I have no idea how to get these uglified scripts to use it.
I've read through several similar inquiries, but none have addressed forcing a jQuery version on minified/uglified code. Others speak to a level of expertise in jQuery module development that I don't have and don't have time to scale into.
Is there a way to get all these modules that use require('jquery') to have that reference jQuery3_3_1? I'd love it if there were a way to say, "For all the files that live in this directory, jQuery/jquery (there are 2 ways it is called) means jQuery3_3_1/jquery3.3.1".
Or being that it's a Wordpress site, could this be defined in the wp_enqueue_script() call?
Many thanks for your help!
I have a problem using the minimized version of OL3 library. It doesn't include the goog namespace. I do not know if it is not included in the js file or is the 'goog' namespace obfuscated.
But this part can be easily handled by just including Google closure library in a separate file. But after I do that I get another two errors:
NetworkError: 404 Not Found - http://localhost/my_test_app/apps/deps.js: should I include this file as well and if yes, should I include all other files from google closure library which this file tries to add dependencies to ?
ol.proj.Units is undefined: this one looks like obfuscated namespaces
And again it also looks like some namespaces were changed.
Shouldn't the namespaces, just like public methods, be kept unchanged in the obfuscated file ?
I tried to use the latest version of OL3: 3.8.2
You should not have to load the goog namespace in production, there is a good discussion with good example of how to create an OpenLayers3 control with plain javascript on the OL3 GitHub. https://github.com/openlayers/ol3/issues/3943
ol.proj.Units is not obfuscated, it is part of the public library. It's value is probably not initialized correctly in your application.
I have an idea where I would like to load jQuery (via CDN) into a JavaScript file that when called on the page loads jQuery via the CDN and also loads the JavaScript file. so instead of doing:
<script>jquery</script>
<script>myscript></script>
I would just do:
<script>myscript</script>
and then jQuery would just load.... Because in the myscript.js I would be doing something like: call jQuery via CDN .... do js code here that uses jQuery ...
Although we can hope for a module solution in a near future, JavaScript currently doesn't allow for simple script dependency management.
You have a few solutions, the two main ones are :
you write in your code a script element
you use a library which manages dependencies like RequireJS
If you want to use RequireJS, then you'd better read the guide dedicated to importing jQuery.
Today, with the current state of the import management in browsers, I would generally recommend to be less ambitious and to simply import with a classical script element. But RequireJS is interesting and you might find it useful when your application grows.
Add this to your script:
document.write(unescape("%3Cscript src='/js/jquery-X.X.X.min.js' type='text/javascript'%3E%3C/script%3E"));
I am building an app in JQM that has multiple instances but the same core of scripts.
Summarizing, every instance will have its own index.html initializing that particular instance with files both taken from the central repository (the common scripts/interface) and from the particular instance (files specific to that instance only).
Since I am adding more capabilities to the application, I need to constantly update the core of scripts with new addons (both 3rd party or custom scripts), but I don't want to go and update all the single instances with the new scripts I'm adding.
My question is: is there a method to include a <script> tag inside the index.html of every instance (say <script src="commonurl/commonscripts.js"></script>) and on my common repository, in the commonscript.js use structures like the java import, to import all the scripts I'm using?
I know it's not how js works, but the core of the question is: do you have any suggestion on how to keep the client unvaried and work just on the server side modifying just the included file, or anyway not having to manually modify the client index.html? Is js minification/merging my only option?
Same question applies to CSS files included in the client index.html.
Hope this makes sense, thanks for the answers!
You can do this with requirejs
RequireJS is a JavaScript file and module loader. It is optimized for
in-browser use, but it can be used in other JavaScript environments,
like Rhino and Node. Using a modular script loader like RequireJS will
improve the speed and quality of your code.
http://requirejs.org/docs/start.html
I have a web app built with Dojo 1.7.2, using RequireJS to load individual modules with AMD. I'd like to add a slightly customized copy of the ACE code editor version 0.2.0, which is about 9 months old and uses an earlier, incompatible version of RequireJS to load itself.
Really I'd just like to include the different JavaScript files (Dojo and ACE) without having a namespace collision (on global functions declare and require which is something that RequireJS is designed to help prevent anyway). I'd like to do this without further customization of either project. Is that even possible to do?
Ace's authors recommend using the newest version from the master branch which should be compatible with recent RequireJS.
BTW, could you post somewhere how you managed to run Dojo 1.7.2 with RequireJS?