在 ArcGIS Web AppAbuilder 中将自定义库添加到微件

Question

我正在尝试将 jquery 和 jquery-modal(https://jquerymodal.com/) 的本地版本添加到我的小部件和仅小部件，因为它只会在小部件。

我尝试在我的小部件根文件夹（widget.js/html 所在的位置）中创建一个名为 "extraLibs" 的文件夹，并在 define([]) 的 widget.js 中引用它和 function() 部分的代码，但我做错了，因为它 returns 一个 "jQuery is not defined" 错误所以我相信问题在于我如何在 "extraLibs" 中声明 .js 文件文件夹。

然后我去了 https://jquerymodal.com/ 并获取了 CDN 链接并下载了两个 .js 文件，将它们重命名为 jQuery.js 和 jQueryModal.js 并将它们放在 "extraLibs"文件夹。

然后我这样声明它们：

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

它 returns 我在单击小部件打开时在控制台中出现 "jQuery is not defined" 错误。

我已经按照这个 thread 尝试过，但没有成功。

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

Answer 1

如果您使用的是 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){
});

Answer 2

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

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

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

Answer 3

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 上找到更多很棒的提示 in this video。

在 ArcGIS Web AppAbuilder 中将自定义库添加到微件

Adding custom libraries to a Widget in ArcGIS Web AppAbuilder

javascript

jquery

arcgis-js-api