node.js - 即使我在 config.json 的外部部分中定义，jQuery 也不会作为模块加载

Question

我已经使用 NPM 安装了 jQuery。现在我将其添加到我的外部部分中:

"externals": {
    "jQuery": {
      "path": "/node_modules/jquery/dist/jquery.min.js",
      "globalName": "jQuery1"
    }
}

现在我已经安装了用于轮播和其他漂亮控件的unitegallery。我已经通过 NPM 安装了unitegallery。我添加了如下依赖项:

"externals": {
    "jQuery": {
        "path": "/node_modules/jquery/dist/jquery.min.js",
        "globalName": "jQuery1"
    },
    "UniteGallery": {
        "path": "/src/webparts/carouselControl/unitegallery.min.js",
        "globalName": "UniteGallery",
        "globalDependencies": ["jQuery"]    
    }
}

当我将它们作为 require('jQuery') 和 require('UniteGallery') 加载到我的 .ts 文件中时，会出现错误，如下所示

Resource "jQuery" not found in loader configuration of manifest for component

。我真的很烦恼寻找解决方案。所有博客都说这是唯一的方法。但为什么它给我错误呢？我在这里做错了什么？

Answer 1

使用早期版本的 Visual Studio 代码时，我遇到了这个问题。不是最新的。旧的解决方案现在工作正常。但从那时起我正在做的事情，我不再使用本地引用，而是使用 CDN引用。首先，我正在搜索 winodw['jQuery'] 对象，如果该对象未定义，那么我将使用 SPComponentLoader 函数加载 jQuery。下面是示例代码:

if(typeof(window['jQuery'])=='undefined'){
        SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js').then(($:any)=>{
            this.jQuery=$;
            this.initSearch();
        });
      }
      else{
        this.jQuery = window['jQuery'];
        this.initSearch();
      }