Question

我想使用require.js加载FB SDK。

我的测试用例是这样的：

test.js ：

require([        
     'libs/facebook/fb'
     ], function(FB){
     FB.api("/me", function(){});
));

我想在加载FB SDK之后运行test.js，并准备FB。

有关如何实现这一目标的任何想法？我的包装器（libs / facebook / fb.js）应该有什么？

Answer 1

似乎FB API不是AMD模块，因此它没有以RequireJS习惯的方式定义自己。您需要使用require.config来填充FB API。我假设test.js是您提供的脚本，作为RequireJS的数据主要值。

require.config({
    shim: {
        'facebook' : {
            exports: 'FB'
        }
    },

    paths: {
        'facebook' : 'libs/facebook/fb'
    }
});

require(['facebook'], function(FB){
    FB.api('/me', function(){});
});

Answer 2

或者将init代码包装在一个模块中（该示例使用Dojo）：

define( 'facebook', 
    [ 'dojo/dom-construct', 
      'dojo/_base/window', 
      'https://connect.facebook.net/en_US/all/debug.js' ], // remove "/debug" in live env
    function( domConstruct, win ) 
    {

        // add Facebook div
        domConstruct.create( 'div', { id:'fb-root' }, win.body(), 'first' );

        // init the Facebook JS SDK
        FB.init( {
            appId: '1234567890', // App ID from the App Dashboard
            channelUrl: '//' + window.location.hostname + '/facebook-channel.html', // Channel File for x-domain communication
            status: true, // check the login status upon init?
            cookie: true, // set sessions cookies to allow your server to access the session?
            xfbml: true // parse XFBML tags on this page?
        } );


        // Additional initialization code such as adding Event Listeners goes here
        console.log( 'Facebook ready' );

        return FB;
    } 
);

Answer 3

以下是来自Facebook的文档： https://developers.facebook.com/docs/javascript/howto/requirejs/

require.config({
  shim: {
    'facebook' : {
      export: 'FB'
    }
  },
  paths: {
    'facebook': '//connect.facebook.net/en_US/all'
  }
})
require(['fb']);

然后添加如下模块：

define(['facebook'], function(){
  FB.init({
    appId      : 'YOUR_APP_ID',
    channelUrl : '//yourdomain.com/channel.html'
  });
  FB.getLoginStatus(function(response) {
    console.log(response);
  });
});

Answer 4

在voidstate's和Dzulqarnain Nasir's答案的基础上，这是我最终在我的项目中使用的代码。

让我绊倒的部分是FB.init()显然是异步的。在尝试调出callback()（没有FB.getLoginStatus）时，FB尚未初始化，我收到了“An active access token must be used to query information about the current user.”错误。

RequireJS Shim Config

require.config({
    // paths: { 'facebookSDK': '//connect.facebook.net/en_US/all/debug' }, // development
    paths: { 'facebookSDK': '//connect.facebook.net/en_US/all' }, // production
    shim: { 'facebookSDK': { exports: 'FB' } }
});

AMD模块初始化Facebook JS SDK

define(['facebookSDK'], function (FB) {
    'use strict';

    return function (settings, callback) {
        var args = {
            appId: settings.appId,
            channelUrl: settings.channelUrl,
            status: true,
            cookie: true,
            xfbml: true
        };

        console.log('Calling FB.init:', args);
        FB.init(args);

        if (callback && typeof (callback) === "function") {
            // callback() // does not work, FB.init() is not yet finished
            FB.getLoginStatus(callback);
        }            
    };

});

这仍然不能完全解决原始问题的期望用法。

OP的代码可以改写为：

require(['libs/facebook/fb'], // where fb.js holds my above Module
   function(FBinit){
     FBinit({
       appId: appId, 
       channelUrl: channelUrl
     }, function(){
       FB.api("/me", function(){});
     });
   }
);

这不是OP的原始概念，但它是我能想到的最好的。如果有人有，我会喜欢一些关于如何改进我的方法的反馈或建议。我仍然是RequireJS的新手。

使用带有FB SDK的require.js

4 个答案: