How to use third party jquery libraries in magento along with requirejs?

Question

I am bit new to requirejs and currently learning AMD pattern in requirejs.I want to use custom third-party jquery libraries in magento.

I have two questions:

1. How to use jquery scripts that are dependent on newer version of jquery as Magento comes preinstalled only with jquery v-1.12.4.Whenever I want to use libraries that depends on version 3.3.1 I can't use them.

2. How to define those third party libraries as AMD module so that I can use them in any template file?

After doing some googling, I came to know that to define any component as dependent on jquery I have to use shim config of requirejs.For example here is my code

var config = {
 'map': {
 '*': {
 'somecomponent': 'js/somecomponent'
 }
 },
 'shim': {
 'somecomponent': {
 deps: ['jquery']
 }
 }
 }

I have done all these things and still I can't use the function from somecomponent.Is it that to use code from somecomponent.js , I have to use define inside somecomponent.js and return/export some object so as to use in template files?

Is it that I have to do modifications inside somecomponent.js jquery library? If yes then what?

Script inside template looks like below.

<script type="text/javascript">
 require(['jquery','somecomponent'],function(,ドル somecomponent) {
 somecomponent.init({
 //options object
 })
 })
</script>

And browser is giving an error- Uncaught TypeError: Cannot read property 'init' of undefined

Note:- Somecomponent is already using $ inside it.

• Bhavin Gehlot: also add path in requiredJs and check if it's work. paths: {"somecomponent": 'js/somecomponent'}
• Shashank Bhatt: I have added paths config with no luck.
• Chirag Patel: Have checked it magento.stackexchange.com/questions/131056/… ?
• Shashank Bhatt: Can you please explaint how to use exports within shim? I can't understand that.

Answer 1

For example, if you place the js in app/code/Vendor/Module/view/frontend/web/js/somecomponent.js, you can call this js in requirejs like below

<script type="text/javascript">
requirejs(['Vendor_Module/js/somecomponent'], function(some){
 //remaining code.........
});
</script>

• Shashank Bhatt: I have put somecomponent.js directly at theme level directory i.e. inside <theme_dir>/web/js/somecomponent.js and requirejs-config.js in <theme_dir>/ directly.

Answer 2

If you have init function inside your js file just try this one.i think this one work. Because i also have used this in one of my module.

If not work!! can you show your js code here !! so will understand better.

require(['jquery','somecomponent'],
 function ($) {
 $(document).ready(function () {
 });
});