尝试将 cloudinary 与 requirejs 一起使用答案

【问题标题】：Trying to use cloudinary with requirejs尝试将 cloudinary 与 requirejs 一起使用
【发布时间】：2016-03-25 17:03:38
【问题描述】：

我正在尝试使用以下代码使用 cloudinary 库，但我不断收到“TypeError：无法读取未定义的属性‘配置’”。

main.js

require.config({
  shim: {
    "jquery": {},
  }
});
require(['jquery', 'jquery.ui.widget', 'jquery.iframe-transport', 'jquery.fileupload', 'jquery.cloudinary'], function($) {
  $(document).ready(function() {
    $.cloudinary.config({
      cloud_name: 'sample',
      api_key: '874837483274837'
    })
  });
});

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
</body>
<script data-main="js/main.js" type="text/javascript" src="js/require.js"></script>
</html>

【问题讨论】：

我认为您在这里缺少一些垫片。您需要将 jQuery 插件添加为 shim，而 shim 又需要 jQuery：shim: {'jquery.cloudinary': { deps: ['jquery'] }}。您应该在 RequireJS 感知 JS 中对所有要附加到 $（或您定义的任何符号）的 jQuery 插件执行此操作。
试过了，仍然得到“Cannot read property 'config' of undefined”
您是否将jquery.cloudinary.js 脚本包含在您的js/ 文件夹中？
在jsfiddle.net 上的快速演示会非常有用。
如果这真的是你main.js，因此你做的唯一配置，那么这意味着你懒加载JS库而不使用任何paths。正如@Louy 指出的那样，请检查您的js 顶级目录中的每个文件。看看您的 Firebug（或等效工具）的网络选项卡在尝试加载“jquery.cloudinary.js”时会告诉您什么也很有趣……例如，您在该文件上得到 404 吗？

标签： javascript requirejs amd cloudinary

【解决方案1】：

似乎他们的库有一些错误，他们用 2.0.4 版本修复了它。

【讨论】：

这是否意味着您不再收到 TypeErrors，无需更改代码？

【解决方案2】：

Cloudinary 小部件 all.js 无法使用 require.js 直接加载（即使使用 shim）。我们只能抓到脚本加载的瞬间，从window获取widget对象。

// Require.js doesn't load the Cloudinary script if it specified in a `required` call but does load if in a `define`
define('cloudinary', ['https://widget.cloudinary.com/global/all.js'], function () {
    return window.cloudinary;
});

require(['cloudinary'], function (cloudinary) {
    console.log(cloudinary);
});

【讨论】：