使用 Require.js 加载 PubNub

Question

我正在尝试使用 Require 将 PubNub 加载到我的项目中。但是当我尝试初始化“PubNub”时，它返回为未定义。

我已经下载了当前的 pubnub.4.20.1.js 并将其包含在我项目的脚本文件夹中。这是我的要求代码：

require.config({
paths: {
    jquery: '../../jquery-2.2.3.min',
    bootstrap: '../../bootstrap.min',
    underscore: '../../underscore.min',
    backbone: '../../backbone.min',
    marionette: '../../backbone.marionette.min',
    handlebars: '../../handlebars.min',
    pubnub: '../../pubnub.4.20.1'
},

shim: {
    underscore: {
        exports: '_'
    },

    backbone: {
        deps: ["underscore", "jquery"],
        exports: "Backbone"
    },

    marionette: {
        deps: ["backbone"],
        exports: "Marionette"
    },

    pubnub: {
        exports: "PubNub"
    }
}});

require(
["marionette",
"handlebars", 
"bootstrap",
"pubnub"], function (Marionette, PubNub) {
    window.App = new Marionette.Application();

    // Initialize Pubnub
    App.pubnub = PubNub.init({
        publish_key: 'pub-c-0d5593f5-bf33-4d4a-b3a7-70a941b2282b',
        subscribe_key: 'sub-c-e4b4d296-1bd4-11e8-a9da-22fca5d72012'
    });
);

任何帮助将不胜感激！

Answer 1

PubNub 和 Require JS

更新：请参阅此页面上的Louis's 答案。

PubNub SDK 是 WebPacked。您必须执行额外的步骤才能使其与 RequireJS 一起使用。请参阅@Louis PubNub and Require JS on this page 的回答。

• 问题：Webpack 不会捆绑包含 requireJS/AMD 语法的文件。
• 问题：有什么方法可以让 webpack 与 requireJS 配合得很好？
• 回答：见 Louis https://stackoverflow.com/a/49040241/524733 的回答

RequireJS 和 Webpack 会自动很好地配合。在这种情况下，@SingingSmitty 发布的原始问题表明shim 的使用是错误的。根据路易斯的说法：

您应该仅将shim 用于未将自身注册为适当的 AMD 模块的代码。调用 define 的代码将自身注册为适当的 AMD 模块，因此您不要对此类代码使用 shim。您应该删除 PubNub 的 shim，因为它调用了 define（查看源代码，在文件的开头）。除非您使用的是过时版本的 Underscore、Backbone 和 Marionette，否则您还应该删除它们的 shim 条目，因为它们是正确的 AMD 模块。 Read full answer from Louis on this page.

在 OP (@SingingSmitty) 提供的问题中，他们确实可以很好地配合。 OP 做了他们不应该做的事情：定义错误的垫片。 shim 的使用与是否涉及 Webpack 完全正交。 Webpack 可以生成需要 shim 的包，也可以生成不需要的包。此外，是否使用 shim 完全独立于 Webpack 是否是生成包的工具链的一部分。

这篇博文描述了http://devalias.net/devalias/2017/08/05/unexpected-journey-webpack-requirejs/ 使用 Webpack 和 RequireJS 的旅程。

下面还有几个链接。

https://gist.github.com/xjamundx/b1c800e9282e16a6a18e https://www.npmjs.com/package/requirejs-to-webpack-cli

Answer 2

我从未使用过 PubNub，但能够在大约 5 分钟内让它与 RequireJS 一起工作。 Here is a plunk 包含PubNub documentation 中给出的“hello world”示例。我刚刚添加了加载 RequireJS 和 PubNub 所需的代码并调用了publish()，它就可以正常工作了。

以下是我在您显示的代码中看到的问题：

1. PubNub.init 不存在。因此，即使它正确加载，您也会遇到错误。

2. 您错误地使用了shim。您应该仅将它用于未将自身注册为正确 AMD 模块的代码。调用define 的代码会将自己注册为适当的AMD 模块，因此您不要将shim 用于此类代码。您应该删除 PubNub 的 shim，因为它调用 define（查看源代码，在文件的开头）。除非您使用的是过时版本的 Underscore、Backbone 和 Marionette，否则您还应该删除它们的 shim 条目，因为它们是正确的 AMD 模块。

我在这里复制了 plunk 中的 script 元素：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js">
  </script>
  <script>
    require.config({
      paths: {
        pubnub: "https://cdn.pubnub.com/sdk/javascript/pubnub.4.20.1",
      }
    });

    require(["pubnub"], function(PubNub) {
      console.log(PubNub);

      function publish() {

        pubnub = new PubNub({
          publishKey: 'demo',
          subscribeKey: 'demo'
        })

        function publishSampleMessage() {
          console.log("Since we're publishing on subscribe connectEvent, we're sure we'll receive the following publish.");
          var publishConfig = {
            channel: "hello_world",
            message: "Hello from PubNub Docs!"
          }
          pubnub.publish(publishConfig, function(status, response) {
            console.log(status, response);
          })
        }

        pubnub.addListener({
          status: function(statusEvent) {
            if (statusEvent.category === "PNConnectedCategory") {
              publishSampleMessage();
            }
          },
          message: function(message) {
            console.log("New Message!!", message);
          },
          presence: function(presenceEvent) {
            // handle presence
          }
        })
        console.log("Subscribing..");
        pubnub.subscribe({
          channels: ['hello_world']
        });
      }

      publish();
    })
  </script>