Question

我在ReactJS Webpack应用中使用https://www.npmjs.com/package/googleapis。它确实有一个警告，它是一个alpha版本，所以问题是可以预料的，这就是我所拥有的。

npm install googleapis --save已安装googleapis，将"googleapis": "^2.0.2"添加到我的package.json中，但是当我运行grunt build时，我收到以下警告（后面会有大量错误，我会根据请求发布，因为它有很多文字）：< / p>

WARNING in ./~/googleapis/apis/index.js
Critical dependencies:
41:23-44 the request of a dependency is an expression
@ ./~/googleapis/apis/index.js 41:23-44

WARNING in ./~/googleapis/~/request/~/hawk/~/hoek/lib/index.js
Critical dependencies:
403:34-60 the request of a dependency is an expression
@ ./~/googleapis/~/request/~/hawk/~/hoek/lib/index.js 403:34-60

~/googleapis/apis/index.js中的违规行是：

var Endpoint = require(endpointPath);

我遇到的一个错误：

ERROR in ./~/googleapis/~/request/~/hawk/~/hoek/lib/index.js
Module not found: Error: Cannot resolve module 'fs' in /Users/dev/wwb-web-app/node_modules/googleapis/node_modules/request/node_modules/hawk/node_modules/hoek/lib
 @ ./~/googleapis/~/request/~/hawk/~/hoek/lib/index.js 3:9-22

在我的React组件中需要googleapis的代码：

var gapi = require('googleapis');

注意：可以根据要求提供组件中的任何其他代码，但我认为这与此问题无关。

我的package.json个依赖关系：

"dependencies": {
"aws-sdk": "^2.0.21",
"chalk": "^0.5.0",
"crypto-js": "^3.1.2-5",
"cryptojs": "^2.5.3",
"envify": "^1.2.1",
"fluxxor": "1.5.1",
"googleapis": "^2.0.2",
"imports-loader": "^0.6.3",
"jquery": "~2.1.1",
"moment": "^2.8.3",
"react": "0.11.1",
"react-bootstrap": "0.12.0",
"react-router": "0.5.2",
"react-router-bootstrap": "0.5.0"
},
"devDependencies": {
"connect-livereload": "^0.4.0",
"css-loader": "^0.7.0",
"es6-promise": "^1.0.0",
"esrever": "^0.1.0",
"grunt": "^0.4.5",
"grunt-contrib-copy": "^0.5.0",
"grunt-contrib-less": "~0.11.4",
"grunt-contrib-uglify": "^0.7.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-git": "^0.2.14",
"grunt-gitinfo": "^0.1.6",
"grunt-karma": "^0.8.3",
"grunt-lesslint": "^1.1.13",
"grunt-rsync": "^0.6.1",
"grunt-ssh": "^0.11.2",
"grunt-webpack": "^1.0.8",
"jssha": "^1.5.0",
"jsx-loader": "^0.10.2",
"karma": "^0.12.17",
"karma-chrome-launcher": "^0.1.7",
"karma-coverage": "^0.2.7",
"karma-jasmine": "^0.1.5",
"karma-js-coverage": "^0.4.0",
"karma-osx-reporter": "^0.1.0",
"karma-phantomjs-launcher": "^0.1.4",
"karma-sourcemap-loader": "^0.3.2",
"karma-webpack": "^1.2.1",
"load-grunt-tasks": "^0.6.0",
"style-loader": "^0.6.4",
"time-grunt": "^1.0.0",
"webpack": "^1.4.15"
}

npm版本2.5.1

节点版本v0.12.1

提前感谢您的帮助！

Answer 1

我没有工作答案，但我也在寻找答案。你是GitHub上的dmk12吗？如果没有，请看一下这个问题：

https://github.com/google/google-api-nodejs-client/issues/403

看起来问题的一部分是图书馆有一行

var Endpoint = require(endpointPath);

必须进行评估，因为endpointPath是一个变量。不幸的是，问题在于它们可能无法改变这种行为，因为它使代码更加灵活。一个人（也许是你？）建议通过<script>中的index.html标记加载API来解决这个问题，但这对我们不起作用 - 我的团队和我想要使用来自服务器端代码的API。

继续寻找答案。

Answer 2

正如comments of the project team,浏览器所阐明的那样，google-api-nodejs-client项目不支持使用。它仅供服务器端使用。

要解决如何将Google API与React Webpack应用程序结合使用的更广泛问题，NuclearMail基于Redux的Gmail客户端提供了一个示例。

在NuclearMail的入口点，index.html加载Webpack捆绑包，然后加载带有handleGoogleClientLoad回调的Google API加载：

<script src="app.js"></script>
<script src="https://apis.google.com/js/client.js?onload=handleGoogleClientLoad"></script>

该回调在src/API.js中定义：

/* global gapi */

import ActionType from './ActionType';
import store from './store';

window.handleGoogleClientLoad = function() {
  tryAuthorize(true);
};

function tryAuthorize(immediate) {
  store.dispatch({type: ActionType.Authorization.REQUEST});
  gapi.auth.authorize(
    {
      /*eslint-disable camelcase*/
      client_id: '108971935462-ied7vg89qivj0bsso4imp6imhvpuso5u.apps.googleusercontent.com',
      /*eslint-enable*/
      scope: 'email https://www.googleapis.com/auth/gmail.modify',
      immediate
    },
    whenAuthenticated
  );
}

function whenAuthenticated(authResult) {
  if (authResult && !authResult.error) {
    store.dispatch({type: ActionType.Authorization.SUCCESS});
    gapi.client.load('gmail', 'v1', whenLoaded);
  } else {
    store.dispatch({type: ActionType.Authorization.FAILURE});
  }
}

使用google-api-nodejs-client和webpack构建grunt错误

2 个答案: