PubNub和Require JS

Question

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

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

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上发挥出色？
回答：请参阅路易https://stackoverflow.com/a/49040241/524733

RequireJS和Webpack 将自动合作。在这种情况下，@ SingingSmitty发布的原始问题显示shim的使用是错误的。据路易斯说：

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

在OP（@SingingSmitty）提供的问题中，它们确实可以很好地协同工作。 OP去做了他们不应该做的事情：定义错误的垫片。垫片的使用与是否涉及Webpack完全正交。 Webpack可以生成需要垫片的捆绑包，并且可以生成不需要的捆绑包。此外，是否使用填充程序完全独立于Webpack是否是生成捆绑包的工具链的一部分。

此博客文章描述了使用Webpack和RequireJS的旅程http://devalias.net/devalias/2017/08/05/unexpected-journey-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包含＆＃34; hello world＆＃34; PubNub documentation中给出的示例。我刚刚添加了必要的代码来加载RequireJS和PubNub并调用publish()，它就可以了。

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

PubNub.init不存在。因此，即使它正确加载，您也会出错。
您错误地使用了shim。您应该仅将其用于未将自身注册为正确AMD模块的代码。调用define的代码将自己注册为正确的AMD模块，因此您不必将shim用于此类代码。您应该删除PubNub的shim，因为它调用define（查看源代码，在文件的开头）。除非您使用的是Underscore，Backbone和Marionette的陈旧版本，否则您还应删除它们的shim条目，因为它们是正确的AMD模块。

我在这里复制了来自插件的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>

使用Require.js

2 个答案:

PubNub和Require JS