将“require”库导入 ReactJS 项目

Question

我正在学习 ReactJS 语言，现在我需要将 request 库添加到我的项目中。所以我通过npm install 命令从github.com/request/request 下载了库，现在我需要将此库导入到我的项目中。

但是什么时候我会使用：

import Request from 'request';

或

var request = require('request');

然后我无法构建我的应用程序（由于一些错误）。我不确定，如果我可以通过这种方式将 3rd 方模块 （或如何调用） 导入到 ReactJS 中。

你能给我一点帮助吗？

==== 包含错误 ====

在我的 .jsx 文件中，我得到了：

import React from 'react';
var request = require('request');
import {Table, TableBody, TableFooter, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import DialogWindow from '../components/DialogWindow.jsx'

import ContentAdd from 'material-ui/svg-icons/content/add';
import PlayArrow from 'material-ui/svg-icons/av/play-arrow';
import PlaylistAdd from 'material-ui/svg-icons/av/playlist-add';

如您所见，请求是在第二行导入的。当我尝试构建我的应用程序时，我会收到此错误：

ERROR in ./~/forever-agent/index.js
Module not found: Error: Can't resolve 'net' in 'folder with project\node_modules\forever-agent'
 @ ./~/forever-agent/index.js 6:10-24
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./src/containers/Album.jsx
 @ ./src/routes.js
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./~/tough-cookie/lib/cookie.js
Module not found: Error: Can't resolve 'net' in 'folder with project\node_modules\tough-cookie\lib'
 @ ./~/tough-cookie/lib/cookie.js 32:10-24
 @ ./~/request/lib/cookies.js
 @ ./~/request/index.js
 @ ./src/containers/Album.jsx
 @ ./src/routes.js
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./~/tunnel-agent/index.js
Module not found: Error: Can't resolve 'net' in 'folder with project\node_modules\tunnel-agent'
 @ ./~/tunnel-agent/index.js 3:10-24
 @ ./~/request/lib/tunnel.js
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./src/containers/Album.jsx
 @ ./src/routes.js
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./~/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'folder with project\node_modules\forever-agent'
 @ ./~/forever-agent/index.js 7:10-24
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./src/containers/Album.jsx
 @ ./src/routes.js
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./~/tunnel-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'folder with project\node_modules\tunnel-agent'
 @ ./~/tunnel-agent/index.js 4:10-24
 @ ./~/request/lib/tunnel.js
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./src/containers/Album.jsx
 @ ./src/routes.js
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./~/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in 'folder with project\node_modules\request\lib'
 @ ./~/request/lib/har.js 3:9-22
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./src/containers/Album.jsx
 @ ./src/routes.js
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

Answer 1

看起来是库的一个已知问题。 https://github.com/request/request/issues/1529 中描述了一个修复程序（将 node 配置对象添加到您的 Webpack 配置）以使库在浏览器中工作。

但是，您可能需要考虑其他库，例如 isomorphic-fetch 或 axios。