Lỗi khi xây dựng grunt bằng cách sử dụng google-api-nodejs-client với webpack

Question

Tôi đang sử dụng https://www.npmjs.com/package/googleapis trong ứng dụng Webpack ReactJS. Nó có một cảnh báo rằng đó là một phiên bản alpha, do đó, vấn đề là để được mong đợi, và đây là một trong những tôi đang có.

npm install googleapis --save cài đặt googleapis ok, thêm "googleapis": "^2.0.2" để package.json của tôi, nhưng khi tôi chạy grunt build tôi nhận được những lời cảnh báo sau đây (sau đó là rất nhiều lỗi mà tôi sẽ gửi theo yêu cầu, vì nó là rất nhiều văn bản) :

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 

dòng vi phạm trong ~/googleapis/apis/index.js là:

var Endpoint = require(endpointPath); 

Một trong những lỗi tôi nhận được:

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 

Mã đòi hỏi googleapis trong thành phần Phản ứng của tôi:

var gapi = require('googleapis'); 

Lưu ý: Bất kỳ mã khác từ các thành phần có thể được cung cấp theo yêu cầu, nhưng tôi không tin nó có liên quan đến vấn đề này.

My package.json phụ thuộc:

"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 phiên bản 2.5.1

nút phiên bản v0.12.1

Cảm ơn trước sự giúp đỡ nào!

Answer 1

Tôi không có câu trả lời, nhưng tôi cũng đang tìm kiếm câu trả lời. Bạn có dmk12 trên GitHub? Nếu không, hãy nhìn vào vấn đề này:

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

Dường như một phần của vấn đề là thư viện có một dòng

var Endpoint = require(endpointPath);

mà phải được đánh giá, như endpointPath là một biến. Thật không may, vấn đề nói rằng họ có thể sẽ không thay đổi hành vi này, vì nó làm cho mã của họ linh hoạt hơn. Một người (có thể bạn?) Đã đề xuất làm việc này bằng cách tải các API qua thẻ <script> trong index.html, nhưng điều đó không hiệu quả đối với chúng tôi --- nhóm của tôi và tôi muốn sử dụng API từ mã phía máy chủ.

Cuộc săn tìm câu trả lời vẫn tiếp tục.

Answer 2

Được làm rõ bằng cách sử dụng trình duyệt comments of the project team, không được hỗ trợ cho dự án google-api-nodejs-client. Nó chỉ dành cho việc sử dụng phía máy chủ.

Để giải quyết vấn đề rộng hơn về cách sử dụng API Google với ứng dụng React Webpack, ứng dụng Gmail dựa trên Redux NuclearMail cung cấp một ví dụ.

Tại thời điểm nhập NuclearMail của, index.html tải bó Webpack tiếp theo là tải Google API với một callback handleGoogleClientLoad:

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

Đó gọi lại được định nghĩa trong 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}); 
 
    } 
 
}