How to include external JS in adminhtml using requirejs-config.js

Question

I try to include external JS (fabric.js) in my custom module.

I try so many different way but still not getting success. i don't understand what i missing below is my code.

1. Add external JS (fabric.js) under <Vendor>/<Module_Name>/view/<adminhtml>/web/js/fabric.js
2. Create requirejs-config.js under <Vendor>/<Module_Name>/view/<adminhtml>/requirejs-config.js

Add following code to requirejs-config.js

/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/

var config = {
 map: {
    '*': {            
        fabric: 'Namespace_Modulename/js/fabric'
    }
 }
};

I followed below link to achieve my thing but still not get success.

• magento.stackexchange.com/questions/131056
• magento.stackexchange.com/questions/101671
• magento.stackexchange.com/questions/85851

Any other way to include external JS.

Any help would be appreciated! Thanks.

Answer 1

You need to initialize the javascript component like described in documentation.

If you use the declarative notation using the <script type="text/x-magento-init" /> tag you have to add to your .phtml

<script type="text/x-magento-init">
{
    // components initialized without binding to an element
    "*": {
        "fabric": {} // the alias for "Namespace_Modulename/js/fabric" defined in requirejs-config.js
    }
}
</script>

That's it, your javascript component will be loaded.

Answer 2

Your fabric.js should start something like this (if you don't need without jQuery):

  define([ 
       "jquery" 
    ],
    function($) {
        "use strict"; 

        // Here your custom code...
     console.log('Hello'); 

        });

Check this require js app example, js files always have define(

https://github.com/volojs/create-template/tree/master/www

Or if you use shim in your require config file: a shim automatically adds a wrapper around a JavaScript library that makes it AMD-compatible / RequireJS-friendly.