包括外部 requirejs 模块
Include external requirejs module
如何在我的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
变量/实例可能在其他地方不可用
相关文章:
- RequireJS向模块传递配置总是返回undefined
- 将broccoliJS与当前使用requireJS的模块化主干应用程序结合使用,我想完全放弃requireJS
- 需要requirejs中的库模块
- 我应该如何防止RequireJS中的模块命名冲突
- 使用RequireJS从数组动态加载模块
- 多次使用RequireJS模块不会运行
- RequireJs shim:如何防止 define() {..} 中重复的模块名称
- 使用SammyJS和requireJS来路由模块
- 如何在生产环境中动态加载多个优化的requirejs模块
- 如何触发所有模块都加载了requireJs
- 使用requirejs对延迟加载成员模块进行Typescript
- 模块名称“;mysql”;尚未为上下文_加载.使用require([])http://requirejs.org/doc
- 无法调用requirejs中的另一个模块
- RequireJS:将插件动态应用于模块id
- browserify/requirejs模块和ES6模块有什么区别
- 当混合node和amd模块时,requirejs()返回undefined
- 如何使用RequireJS进行跨模块回调/事件处理
- requirejs:与模块类型相同的新对象
- 未能加载路由模块requirejs?杜兰达尔虫
- 未捕获的ReferenceError:未定义模块RequireJS