使用RequireJS加载FBInstant库失败问题求助

我帮你分析下这个问题哈！你遇到的情况是直接用<script>标签能正常加载FBInstant，但用RequireJS配置后回调里拿到的却是undefined，这大概率是RequireJS的shim配置没有正确捕捉到FBInstant的全局变量，或者加载时机的小问题。下面给你几个可行的解决方案：

方案1：修改shim配置，使用init函数手动导出全局变量 #

有些第三方库的全局变量初始化时机可能和RequireJS的shim检测逻辑不太匹配，这时候用init函数手动返回全局对象就能解决问题：

requirejs.config({
  paths: {
    FBInstant: 'https://connect.facebook.net/en_US/fbinstant.6.1'
  },
  shim: {
    'FBInstant': {
      init: function () {
        // 直接返回window上的FBInstant全局变量
        return window.FBInstant;
      }
    }
  }
});

// 调用测试
requirejs(['FBInstant'], function (FBInstant) {
  console.log(FBInstant); // 现在应该能正常拿到对象了
});

方案2：检查路径是否带.js后缀 #

虽然RequireJS默认会自动给路径加.js，但有些CDN的资源路径可能需要明确指定后缀才能正确加载。你可以试试把paths里的URL改成带.js的版本：

requirejs.config({
  paths: {
    FBInstant: 'https://connect.facebook.net/en_US/fbinstant.6.1.js'
  },
  shim: {
    'FBInstant': {
      exports: 'FBInstant'
    }
  }
});

方案3：确认配置执行顺序 #

一定要保证requirejs.config()的代码在任何requirejs()调用之前执行！如果你的配置代码是在require调用之后才运行的，那RequireJS根本不会用你的配置去加载模块，自然拿不到FBInstant。

额外排查步骤 #

• 打开浏览器的开发者工具（Network面板），确认FBInstant的脚本是否成功加载，有没有出现404错误；
• 可以在回调里先打印window.FBInstant，如果这个有值，就说明是shim的导出逻辑没生效，用方案1的init函数就能解决。

内容的提问来源于stack exchange，提问作者Geo Paul