包含外部 requirejs 模块

Question

如何在我的 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 方式来包含它，则不会；

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

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

或者，如果您需要在全局范围内使用库，例如JQuery​​...等...shim在 requirejs 配置中使用。

并且无论情况如何都不要使用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定义块的变量/实例。当您致电 和/或时，此PSD变量/实例可能在其他地方不可用new Widget()new Widget().init()