在ReactJS中使用Playfab？

Question

我正试图在我的React项目中使用Playfab SDK，但是还没有成功。

我找不到解释得很好的文件。

• 创建了一个react应用程序：

npx create-react-app playfabtest

• 为nodejs安装PlayFab SDK： npm安装playfab-sdk

注意到：( JavaScript (npm install playfab-web-sdk)还有另一个SDK，但我假设对于一个react应用程序，节点是正确的吗?)

这些SDK的文档

• 用以下代码修改了项目上的App.js文件：(实际上，在许多方面，我尝试了最后一个尝试，但两者都不起作用)。

App.js：

// import { PlayFabClient } from './playfab-sdk/Scripts/PlayFab/PlayFabClient';

// var PlayFabClient = require('./PlayFabSdk/Scripts/PlayFab/PlayFabClient.js')

function App() {
  const PlayFabClient = require('./PlayFabSdk/Scripts/PlayFab/PlayFabClient.js');

  PlayFabClient.settings.titleId = '';
  PlayFabClient.settings.developerSecretKey = '';

  PlayFabClient.GetTitleData({ Keys: ['Sample'] }, function (error, result) {
    if (error) {
      console.log('Got an error: ', error);
      return;
    }

    console.log('Reply: ', result);
  });

  return ...
}

• 在那之后，如果我运行: npm启动

获取此错误：

错误：

Compiled with problems:

ERROR in ./src/PlayFabSdk/Scripts/PlayFab/PlayFab.js 4:10-24

Module not found: Error: Can't resolve 'url' in 'D:\Github\playfabtest\src\PlayFabSdk\Scripts\PlayFab'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
    - install 'url' If you don't want to include a polyfill, you can use an empty module like this:     resolve.fallback: { "url": false }


ERROR in ./src/PlayFabSdk/Scripts/PlayFab/PlayFab.js 6:12-28

Module not found: Error: Can't resolve 'https' in 'D:\Github\playfabtest\src\PlayFabSdk\Scripts\PlayFab'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
    - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this:    resolve.fallback: { "https": false }

如果能够解释如何使PlayfabSDK在一个react应用程序上运行良好，那将是非常有帮助的。

非常感谢!

Answer 1

在Create的上下文中，需要使用import语句而不是require将playfab-sdk NPM包导入到项目中。另外，您需要在PlayFab对象上而不是在PlayFabClient上设置设置。

示例：

import { useEffect, useState } from 'react';
import { PlayFab, PlayFabClient } from 'playfab-sdk'

PlayFab.settings.titleId = process.env.REACT_APP_PLAYFAB_TITLE_ID || ''
PlayFab.settings.developerSecretKey = process.env.REACT_APP_PLAYFAB_DEVELOPER_SECRET_KEY

// continue with component implementation
const App {
  // get title data
  PlayFabClient.GetTitleData(...)
  // etc...
}

export default App