React中如何识别通过script标签引入的FBInstant SDK？

当你通过script标签引入第三方SDK时，TypeScript和ESLint默认不会识别全局暴露的变量，所以会出现'FBInstant' is not defined的错误。下面是几种可行的解决方法，完全符合Facebook的要求（不用打包SDK）：

方法1：声明全局TypeScript类型（推荐） #

因为你用的是TypeScript，最规范的方式是添加类型声明文件：

• 在你的src目录下创建一个新文件，比如fb-instant.d.ts
• 在文件里添加以下内容：

declare var FBInstant: any;

如果想更精确，你可以根据Facebook官方文档的API定义更详细的类型（比如定义startGameAsync、context、player等属性的类型），不过先用any可以快速解决问题。

TypeScript会自动识别这个声明文件，之后你在代码里直接使用FBInstant就不会报错了。

方法2：通过window对象访问 #

由于通过script标签引入的SDK会挂载到全局window对象上，你可以直接用window.FBInstant来访问：
修改你的代码如下：

window.FBInstant.startGameAsync()
  .then(function() {
    var contextId = window.FBInstant.context.getID();
    var contextType = window.FBInstant.context.getType();
    var playerName = window.FBInstant.player.getName();
    var playerPic = window.FBInstant.player.getPhoto();
    var playerId = window.FBInstant.player.getID();
    game.start();
  });

这样ESLint和TypeScript都会认可这个变量，因为window是全局已知的对象。

方法3：配置ESLint忽略全局变量 #

如果你只是想解决ESLint的no-undef错误，可以在ESLint配置里添加全局变量声明：

• 打开package.json，找到eslintConfig部分，添加：

"eslintConfig": {
  "globals": {
    "FBInstant": "readonly"
  }
}

或者如果是单独的.eslintrc.js文件：

module.exports = {
  // 其他配置...
  globals: {
    FBInstant: 'readonly'
  }
};

不过这种方法只能解决ESLint的错误，TypeScript仍然会报错，所以建议结合方法1一起使用。

额外注意事项 #

• 确保SDK加载顺序：因为你把script标签放在public/index.html里，React代码执行时SDK应该已经加载完成，但保险起见可以加个判断：

if (window.FBInstant) {
  window.FBInstant.startGameAsync().then(/* ... */);
}

• 严格遵循Facebook的要求：不要尝试npm安装FBInstant相关包或者打包SDK，否则你的应用会被拒绝，保持script标签引入的方式是正确的。

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