包含外部requirejs模塊

Question

我怎么能包括/使用require.js模塊， PSD.js ，我require.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一樣全局使用庫...等等...在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 varibale / instance 可能在其他地方不可用new Widget().init()