5

我在 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

提前感谢您的帮助！

4

2 回答 2

0

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

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

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

var Endpoint = require(endpointPath);

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

寻找答案的工作仍在继续。

于 2015-11-19T02:37:59.223 回答
0

正如项目团队的评论所澄清的那样，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});
  }
}

于 2017-03-01T00:16:56.300 回答