Fehler bei der Erstellung von Grunt mit google-api-nodejs-client mit Webpack

Question

Ich verwende https://www.npmjs.com/package/googleapis in einer ReactJS Webpack App. Es gibt eine Warnung, dass es sich um eine Alpha-Version handelt, also sind Probleme zu erwarten, und hier ist die, die ich habe.

npm install googleapis --save installiert googleapis ok, "googleapis": "^2.0.2" meiner package.json hinzugefügt, aber wenn ich laufe grunt build ich die folgenden Warnungen (gefolgt von vielen Fehlern, die ich auf Anfrage veröffentlichen werde, da es eine Menge Text ist) :

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 

Die Codezeile in ~/googleapis/apis/index.js ist:

var Endpoint = require(endpointPath); 

Einer der Fehler ich erhalte:

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 

Code, den googleapis in meinem Reagieren Komponente erfordert:

var gapi = require('googleapis'); 

Hinweis: Jeder anderer Code von der Komponente kann auf Anfrage zur Verfügung gestellt werden, aber ich glaube nicht, dass es zu diesem Thema relevant ist.

Meine package.json Abhängigkeiten:

"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 Version 2.5.1

Knoten Version v0.12.1

Vielen Dank im Voraus für jede Hilfe!

Answer 1

Ich habe keine funktionierende Antwort, aber bin auch auf der Suche nach einem. Bist du dmk12 auf GitHub? Wenn nicht, werfen Sie einen Blick auf dieses Problem:

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

Es ist wie ein Teil des Problems sieht ist, dass die Bibliothek eine Linie hat

var Endpoint = require(endpointPath);

, die ausgewertet werden muss, wie endpointPath ist eine Variable. Unglücklicherweise sagt das Problem, dass sie dieses Verhalten wahrscheinlich nicht ändern werden, da es ihren Code flexibler macht. Eine Person (vielleicht Sie?) Schlug vor, dies zu umgehen, indem Sie die APIs über <script> Tag in index.html laden, aber das funktioniert nicht für uns --- mein Team und ich möchte die API von Server-Side-Code verwenden.

Die Suche nach einer Antwort geht weiter.

Answer 2

Wie durch die comments of the project team, Browser-Verwendung für das Projekt google-api-nodejs-client nicht unterstützt wird. Es ist nur für die serverseitige Verwendung.

Um das umfassendere Problem der Verwendung von Google APIs mit einer React Webpack-App zu lösen, bietet der Redux-basierte Gmail-Clientein Beispiel.

Bei NuclearMail der Einstiegspunkt lädt index.html das Webpack Bündel durch die API Last mit einem handleGoogleClientLoad Rückruf Google gefolgt:

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

Das Rückruf in src/API.js definiert:

/* 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}); 
 
    } 
 
}