Adding Jquery library via module

Question

I need to Add Jquery Library to header using my custom Module. so that I Create requirejs-config.js file under Vendorname_ModuleName\view\frontend and Its As Below

var config = {
    map: {
        '*': {
            mypluginjs: 'Vendorname_ModuleName/js/mypluginjs'
        }
    }
};

then I added mypluginjs file under view\frontend\web\js named mypluginjs.js

Then I added My js script to phtml as below

<script type="text/javascript">
require(['jquery','mypluginjs '],function($){
    $(window).load(function() {

//code here

    });
});
</script>

but its showing error.I think not loading mypluginjs .what was the issue. is there any way to add custom jquery plugin via module

Answer 1

Simply add to your phtml file

        <script>
          require(
              [
                  'jquery'
              ],
              function($) {
                  $(document).ready(function(){
                    alert("Hello i am here");
                  });
              }
          );
        </script>

Answer 2

Step 1: Move your JS code into Vendor/Module/view/frontend/web/js/test.js

Step 2: Create requirejs-config.js file in Vendor/Module/view/frontend/ with content:

var config = {
map: {
    '*': {
        testjs:     'Vendor_Module/js/test'
    }
}};

Step 3: add this at the end of your template file where you want this JS to be called

<script type="text/x-magento-init">
{
    "*": {
        "Vendor_Module/js/test": {}
    }
}</script>

Answer 3

Try this one

requirejs-config.js

  var config = {
    map: {
        '*': {
            mypluginjs: 'Arsenaltech_Customer/js/mypluginjs'               
        }
    }
};

Mypluginjs.js

define([
    "jquery",
    "jquery/ui"
], function($) {
    "use strict";
    $.widget('modulename.customname', {
        _create: function() {
            var yourData = this.options;
            /*this.options contaion all variables which you pass in it for use in your javascript code */
            console.log(this.options); 
            // here you can write your javascript code as your requirement
        }
    });
    return $.modulename.customname;
});

Now you can use anywhere in your template file by below method:

<script type="text/x-magento-init">
    {
        "body" : {
             "mypluginjs": 
                    {

                        "yourvar1": "12", 
                        "yourvar2" : "21"
                    }
        }
    }
</script>