包括外部 requirejs 模块

Include external requirejs module

本文关键字:模块 requirejs 包括外      更新时间:2023-09-26

如何在我的require.js应用程序中包含/使用此require.js模块PSD.js?

如果我使用下面这个例子中的脚本,它可以正常工作:

<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>

这是一个活生生的例子;https://jsfiddle.net/numediaweb/8zah99jw/

但是,如果我尝试通过执行重新建议的要求的方式来包含它,它就不会;

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;
});

您仍在以不推荐的方式使用它。定义模块后,只需将参数名称放入该模块的函数中即可。

或者,如果您需要像JQuery一样全局使用库......等。。。在requirejs配置中使用shim

并且在任何情况下都不要使用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变量/实例。当您调用new Widget()和/或new Widget().init()时,此PSD变量/实例可能在其他地方不可用