Enable requirejs plugin

Question

How can I enable / use this module require.js, PSD.js inside the require.js application?

If I use a script like this example below, it works as it should:

<script type="text/javascript" src="assets/scripts/vendor/psd.min.js"></script>
<script type="text/javascript">
    (function () {
        var PSD = require('psd');

        document.getElementById('dropzone').addEventListener('dragover', onDragOver, true);
        document.getElementById('dropzone').addEventListener('drop', onDrop, true);

        function onDragOver(e) {
            e.stopPropagation();
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy';
        }

        function onDrop(e) {
            e.stopPropagation();
            e.preventDefault();

            PSD.fromEvent(e).then(function (psd) {
                var data = JSON.stringify(psd.tree().export(), undefined, 2);
                document.getElementById('data').innerHTML = data;
                document.getElementById('image').appendChild(psd.image.toPng());
            });
        }
    }());
</script>

Here is a living example; https://jsfiddle.net/numediaweb/8zah99jw/

But if I try to enable it by executing the required requirejs method, it is not:

requirejs.config({
    paths: {
        'psd': 'vendor/psd.min'
        }
});

// Load our app module 'main.js' and pass it to our definition function
requirejs(['app'], function (App) {
    // The "app" dependency is passed in as "App"
    App.initialize();
});

define('modules/customwidgets.add_widget', [ 'psd'], function () {
    var Widget = function () {
    };
    Widget.prototype = {
        config: {},
        init: function (htmlElement) {
            "use strict";

            // This module
            var me = this;

           console.log('It loads!');

           var PSD = require('psd');

            document.getElementById('dropzone').addEventListener('dragover', onDragOver, true);
            document.getElementById('dropzone').addEventListener('drop', onDrop, true);

            function onDragOver(e) {
                e.stopPropagation();
                e.preventDefault();
                e.dataTransfer.dropEffect = 'copy';
            }

            function onDrop(e) {
                e.stopPropagation();
                e.preventDefault();

                PSD.fromEvent(e).then(function (psd) {
                    var data = JSON.stringify(psd.tree().export(), undefined, 2);
                    document.getElementById('data').innerHTML = data;
                    document.getElementById('image').appendChild(psd.image.toPng());
                });
            }
        }
    };
    return Widget;
});

Answer 1

You are still using it in a not recommended way. After defining a module, just simply enter the parameter name in the function of that module.

, JQuery... .. shim config.conf.

var something = require('module_name'); .

:

requirejs.config({
    paths: {
        'psd': 'vendor/psd.min'
    },
    // export global alias 'PSD' for 'psd.min'
    shim: {
        'psd': {
            'exports': 'PSD'
        }
    }
});

define('modules/customwidgets.add_widget', ['psd'], function () {
    var Widget = function () {
    };
    Widget.prototype = {
        config: {},
        init: function (htmlElement) {
            "use strict";

            // This module
            var me = this;

           console.log('It loads!');

           // This should not be used.
           // var PSD = require('psd'); 

            document.getElementById('dropzone').addEventListener('dragover', onDragOver, true);
            document.getElementById('dropzone').addEventListener('drop', onDrop, true);

            function onDragOver(e) {
                e.stopPropagation();
                e.preventDefault();
                e.dataTransfer.dropEffect = 'copy';
            }

            function onDrop(e) {
                e.stopPropagation();
                e.preventDefault();

                PSD.fromEvent(e).then(function (psd) {
                    var data = JSON.stringify(psd.tree().export(), undefined, 2);
                    document.getElementById('data').innerHTML = data;
                    document.getElementById('image').appendChild(psd.image.toPng());
                });
            }
        }
    };
    return Widget;
});

100% (??). init PSD / define. PSD varibale/instance , new Widget() / new Widget().init()