开发者社区> 问答> 正文

关于在Require.js使用一个JS插件的问题?报错

大家好~

      我需要在项目中引用一个js控件,这个控件依赖于a.js,b.js,c.js,.....n.js N多个js以及jquery及jquery-ui,各js之间相互还有依赖关系,也就是说必须先加载某一部分才能加载另一部分,最终才能加载整个控件。我想使用require.js来引用他,以避免在head部分书写过多的script标签,但是require.js是异步的,各js会在同一时间加载导致浏览器报错,我应该如何处理这个问题?如下是我的配置代码,欢迎大家指正。

require.config({
	baseUrl:"../../js/jsPlumb/",
	paths:{
		"jquery":"http://cdn.bootcss.com/jquery/1.9.1/jquery.min",
		"jquery-ui":"http://cdn.bootcss.com/jqueryui/1.10.2/jquery-ui.min",
		"jsBezier":"lib/jsBezier-0.6-min",
		"mottle":"lib/mottle-0.3",
		"biltong":"lib/biltong-0.2",
		"katavorio":"lib/katavorio-0.2",
		"util":"src/util",
		"dom-adapter":"src/dom-adapter",
		"jsPlumb":"src/jsPlumb",
		"endpoint":"src/endpoint",
		"connection":"src/connection",
		"anchors":"src/anchors",
		"defaults":"src/defaults",
		"connectors-bezier":"src/connectors-bezier",
		"connectors-statemachine":"src/connectors-statemachine",
		"connectors-flowchart":"src/connectors-flowchart",
		"renderers-svg":"src/renderers-svg",
		"renderers-vml":"src/renderers-vml",
		"connector-editors":"src/connector-editors",
		"domPlumb":"src/dom.jsPlumb"
	},
	shim:{
		"jquery-ui":{
			deps:['jquery'],
			exports:"jquery-ui"
		},
		
		"jsPlumb":{
			deps:[
				"jquery",
				"jquery-ui",
				"jsBezier",
				"mottle",
				"biltong",
				"katavorio",
				"util",
				"dom-adapter",
				"endpoint",
				"connection",
				"anchors",
				"defaults",
				"connectors-bezier",
				"connectors-statemachine",
				"connectors-flowchart",
				"renderers-svg",
				"renderers-vml",
				"connector-editors",
				"domPlumb"
			],
			exports:"jsPlumb"
		}
	}
}); 

require(["jquery","jquery-ui","jsPlumb"],function($,ui){
	var GHandler = jsPlumb.getInstance();
	GHandler.draggable($("#btn"));
})

这个控件的名称叫做jsplumb用于图形拖拽及连线的。jquery及jquery-ui使用cdn,jsplumb放在本地目录js/jsplumb下

补充错误信息截图:

文件目录截图:

展开
收起
爱吃鱼的程序员 2020-06-20 16:47:51 566 0
1 条回答
写回答
取消 提交回答
  • https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIB

    Sdada

    自己看下控制台报什么错

    baseUrl:"../../js/jsPlumb/"

    注意这个,是否引起了报错,基本路径,说明后面引用的js都会经过这个路径。。。

    回复<aclass='referer'target='_blank'>@arrowing:关键也不知道他这个插件内部的依赖是怎么样的回复<aclass='referer'target='_blank'>@arrowing:图补充在问题里了,看看回复<aclass='referer'target='_blank'>@Kent_Chen:那你把报错信息发出来看看这个没问题,引用路径肯定是正确的。不会犯这么低级的错误。<preclass="brush:js;toolbar:true;auto-links:false;">require(["jquery","jquery-ui","jsPlumb"],function($,ui/ 加入/,jsPlumb/ 加入/){varGHandler=jsPlumb.getInstance();GHandler.draggable($("#btn"));})



    回复<aclass='referer'target='_blank'>@arrowing:那其他模块依赖jsplumb这个要怎么写?回复<aclass='referer'target='_blank'>@Kent_Chen:其他js文件依赖于jsPlumb,不是jsPlumb依赖其他文件吧,你自己得先知道依赖关系回复<aclass='referer'target='_blank'>@arrowing:引入只去掉了最后一个getInstance的错误,其他的是依赖的问题啊回复<aclass='referer'target='_blank'>@arrowing:奥,确实忘了引入,但是引入了也还是错啊回复<aclass='referer'target='_blank'>@Kent_Chen:你没引入啊,你jquery和jqueryUI都引入了,没看到吗?这个是requirejs的使用方法,可以查看文档<preclass="brush:js;toolbar:true;auto-links:false;">"jquery-ui":{deps:['jquery'],exports:"jquery-ui"},

    这里是jqueryUi依赖jquery

    你不知道?按这个格式写不就好了。。。


    知道啊,总之就是试了各种方法,都报错。最后我发现他的官方文档有require.js的实现。。。总之非常感谢你的帮忙:)

    2020-06-20 16:48:09
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript面向对象的程序设计 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载