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

Question

我在 ReactJS Webpack 应用程序中使用 https://www.npmjs.com/package/googleapis。它确实有一个警告说它是一个 alpha 版本，所以会出现问题，这就是我遇到的问题。

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

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 是一个变量。不幸的是，该问题表明他们可能不会改变这种行为，因为它使他们的代码更加灵活。一个人（也许是你？）建议通过index.html 中的<script> 标签加载 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});
  }
}