How can I include/use this require.js module, PSD.js , inside my require.js application?
If I use the 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's a live example; https://jsfiddle.net/numediaweb/8zah99jw/
But if I try to include it by doing the recommanded requirejs way it doesn't;
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;
});
You are still using it in a not recommended way. After define the module, just simply put the name of parameter into the function of that module.
Or if you need to use a library globally like JQuery
... etc... Use shim
in requirejs config.
And do not use var something = require('module_name');
regardless situation.
Here is a quick adjustment:
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;
});
Also this adjustment may not providing 100% percent working code (??). Since you are prototyping init
method and using PSD
variable/instance of define block. This PSD
varibale/instance may not available in other place when you are calling new Widget()
and/or new Widget().init()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.