如何解决 AMD 路径冲突?

2023-12-05

我正在尝试使用Esri ArcGis JavaScript API,其加载方式为Dojo, using dojo.require。我有一个现有的模块化AMD/requirejs我需要将此代码集成到其中的 Typescript 应用程序。在初始 TS 文件的顶部,我导入了几个模块:

import tracer = module('../classes/trace');
import pubsub = module('../classes/pubsub');
import masker = module('../classes/masker');
// etc.

这工作正常,但现在我已经添加了 ArcGis 代码,require.js 不再解析应用程序中的相对路径,而是从 Esri 站点获取了一个 baseUrl,并尝试加载:

http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/classes/trace.js
// etc.

导致一串 404 响应和脚本错误。

我怎样才能解决这个问题?

在加载第一个加载模块的文档之前,我尝试在 html 文件的头部设置 requirejs baseUrl :

 <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3"></script>
 <script type="text/javascript" src="/content/client/libs/require.js"></script> <!-- data-main="/content/client/hop/hop.app" -->
 <script type="text/ecmascript">
        require.config({
            baseUrl: "/Content/client/hop/"
        });
 </script>
 <script src="~/Content/client/hop/hop.app.js"></script>

但这失败了,抛出一个异常,要求没有方法配置。

(注意,如果我反转 html 文档头部的顺序,以便 arcgis api 在加载序列中排在最后,那么我会遇到相反的问题 - 我的本地文件都工作正常,但 dojo 和映射 api 失败,因为它们正在寻找当他们应该在 argis 服务器上搜索时相对于我的网站的路径)。


我使用 Esri 的 ArcGIS API,因此遇到了这个问题。Thisdojo 的博客文章帮助了我一些。

第一个问题是 dojo 的配置方式与 requirejs 不同。它会查找先前定义的 dojoConfig 来进行设置。第二个是 Esri 的模块加载全部设置为假设一个基本路径,而您的代码将需要另一个基本路径。您将需要一个如下所示的 dojo 配置:

dojoConfig = {
    baseUrl: location.pathname.replace(/\/[^/]+$/, '') + '/Content/client/hop/',  // magic!
    packages: [
        {
            name: 'dojo',
            location: "http://serverapi.arcgisonline.com/jsapi/arcgis/3.3compact/js/dojo/dojo/"
        },
        {
            name: 'dojox',
            location: "http://serverapi.arcgisonline.com/jsapi/arcgis/3.3compact/js/dojo/dojox"
        },
        {
            name: 'esri',
            location: "http://serverapi.arcgisonline.com/jsapi/arcgis/3.3compact/js/esri"
        }
    ]
};

它所做的是将基本路径设置回当前 url 加上您的额外内容,然后告诉 dojo esri 的内容在哪里。这些是我遇到过的所有包,但如果我错过了一个依赖项,因为它从未为我加载过,那么它将需要一个类似的条目。

您可能遇到的另一个问题是,如果您习惯于在本地加载脚本,如 file://,那么现在来自另一个域的 dojo 将尝试访问 file://,而浏览器将立即关闭它。从现在开始,您需要在本地 http 服务器上进行测试。在 Windows 上我更喜欢HFS在 Linux 上python 让一切变得简单.

我希望这有帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何解决 AMD 路径冲突? 的相关文章