将自定义库添加到ArcGIS Web AppAbuilder中的窗口小部件

Question

我试图将本地版本的jquery和jquery-modal（ https://jquerymodal.com/ ）添加到我的窗口小部件和窗口小部件中，因为它将仅在窗口小部件中使用。

我试图在我的小部件根文件夹（widget.js / html所在的位置）中创建一个名为“ extraLibs”的文件夹，并在代码的define（[]）和function（）部分的widget.js中对其进行引用，但是我这样做是错误的，因为它返回“未定义jQuery”错误，因此我认为问题出在我如何在“ extraLibs”文件夹中声明.js文件。

然后，我转到https://jquerymodal.com/并获得CDN链接，并下载了两个.js文件，将它们重命名为jQuery.js和jQueryModal.js并将它们放置在“ extraLibs”文件夹中。

然后我以这种方式声明它们：

define([... './extraLibs/jQuery', './extraLibs/jQueryModal'],
function(... jQuery, jQueryModal){
//code goes here
});

单击打开的小部件后，它在控制台中返回“未定义jQuery”错误。

我已经尝试过根据这个线程没有运气。

将外部库添加到小部件的正确方法是什么？

Answer 1

通过执行以下操作，我能够在小部件级别成功加载jQuery：

define([... 'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-3.4.1.min.js'],
function(...){
//code goes here
});

至于jquery-modal模块，我通过将其代码移到了PostCreate函数中，将其直接嵌入到widget.js中。

Answer 2

Arcgis Web AppBuilder（WAB）在init.js文件中定义了dojoConfing变量。 如果仔细观察，会发现在其中定义了一个“ libs”包：

...
,{
  name: "libs",
  location: window.path + "libs"
},
...

因此，您可以将外部库放在libs文件夹（wab / server / apps / 1 / libs /-对于ID为1的应用程序）中，然后使用以下方式引用该库：

//File: MyWidget.js
define([
'libs/JQuery', 
'libs/lib2',
'libs/lib3'
],function(jQuery, Lib2, Lib3){
 //...
});

我没有测试此代码，但是从WAB默认小部件来看，这似乎是预期的方式。

在此视频中，您可以找到有关Web AppBuilder的更多重要技巧。

Answer 3

如果您使用的是arcgis javascript api，因此使用dojo，则在包含dojo api之前先设置一个dojoConfig对象。

<script type='text/javascript'>
var dojoConfig = {
aliases [
['jQuery', 'extraLibs/jquery/jquery.js'],
['jQueryModal', 'extraLibs/jquery-modal/jquery-modal.js']
]
}
</script>
<script src="https://js.arcgis.com/3.28/"></script>

然后在您的主要javascript文件中，您可以仅引用别名

define[... 'jQuery', 'jQueryModal],
function(... jQuery, jQueryModal){
});