使用 npm 安装包进行反应答案

【问题标题】：installing package for react using npm使用 npm 安装包进行反应
【发布时间】：2017-08-13 16:01:18
【问题描述】：

我现在从纯前端开发的 HTML、CSS 和一点 jquery 开始使用 react。所以我没有安装包的经验。我想用 npm 安装 axios。

我从npm install axios 开始，它似乎有效。但我仍然收到错误消息“未定义 axios”。我错过了什么？我是否必须纠正 package.json 中的依赖项？如果是，我该如何纠正？

包.json

{
  "name": "first-webapp-react",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "watchify -v -d -t [ reactify --es6 ] main.js -o compiled.js",
    "build": "NODE_ENV=production browserify -t [ reactify --es6 ] main.js | uglifyjs > compiled.js"
  },
  "author": "BAGGID",
  "license": "MIT",
  "dependencies": {
    "moment": "^2.10.2",
    "react": "^0.13.2",
    "axios": "^0.15.3"
  },
  "devDependencies": {
    "browserify": "^9.0.8",
    "reactify": "^1.1.0",
    "uglify-js": "^2.4.20",
    "watchify": "^3.1.2"
  }
}

var React = require('react');

var TopBar = require('./Top-bar');
var ProductPage = require('./Product-page');
var Test = require('./test');


var App = React.createClass({

  getInitialState: function() {
    return {
      page: 'SearchResult',
      jobs: []
    };    
  },

  componentDidMount: function() {
    var _this = this;
    this.serverRequest = 
      axios.get("http://codepen.io/jobs.json")
        .then(function(result) {    
          _this.setState({
            jobs: result.data.jobs
          });
        })
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

	render(){
    console.log('Person: ' + this.state.person);
		return (
			<div>
				<TopBar />		
        <ProductPage />
        <Test />
			</div>
		);
	}
});

module.exports = App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>React Test</title>
	<link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="assets/css/styles.css" type="text/css" rel="stylesheet" />
	<link href="assets/css/baggid-standart.css" type="text/css" rel="stylesheet" />
	<link href="assets/css/login.css" type="text/css" rel="stylesheet" />
	<link href="assets/css/button-stacking.css" type="text/css" rel="stylesheet" />
</head>
<body>

	<div id="main">	
	</div>

	
	<script src="./compiled.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</body>
</html>

【问题讨论】：

您应该为您的问题添加更多详细信息，首先添加您的 package.json 和您正在使用 Axios 库的代码。

标签： reactjs npm npm-install axios

【解决方案1】：

您应该在使用前尝试导入它。

import 'axios' from 'axios';

也是这样。

const axios = require('axios');

【讨论】：

我用你的代码和var Axios = require('axios');试过了，但还是一样的错误
从 Axios 更改为 axios，因为在您的代码中您使用的是这样的。
就是这样，非常感谢！我不知道我在那里将 axios 定义为变量。但是由于我尝试了所有给定的答案，所以我不知道是否还需要其他东西：D

【解决方案2】：

只需通过CDN 安装，将此代码插入到您的 html 文件中

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

只需将此代码插入到您的 html 文件中即可。

这就是你的 html 文件的样子

<!DOCTYPE html>
<html> <head lang="en"> 
<meta charset="UTF-8"> 
<title>React Test</title> 
<link href="maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/" type="text/css" rel="stylesheet" /> 
<link href="assets/css/styles.css" type="text/css" rel="stylesheet" /> 
</head> 
<body> <div id="main">	your content here </div> 
<script src="compiled.js"></script> 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
</body> 
</html>

【讨论】：

我试过了，但它不起作用。还是一样的错误信息。
' React 测试
我将编辑答案并在其上发布正确的代码。
您在没有 https:// 协议的情况下插入了脚本标签，并且您在 javascript 包含中使用了 ;，因此无需使用 ;何时包含脚本
我的问题通过将var axios = require('axios'); 添加到我的app.js 中得到解决。我标记为正确。谢谢您的回答。我会投赞成票，但我的投票不算数，但因为我对堆栈溢出还很陌生。

【解决方案3】：

查看这个简单的例子，如何使用axios：

var App = React.createClass({

  getInitialState: function() {
    return {
      page: 'SearchResult',
      jobs: []
    };    
  },

  componentDidMount: function() {
    var _this = this;
    this.serverRequest = 
      axios.get("http://codepen.io/jobs.json")
        .then(function(result) {    
           console.log('success');
          _this.setState({
            jobs: result.data.jobs
          });
        })
        .catch(e => console.log('error', e))
  },

  componentWillUnmount: function() {
      this.serverRequest.abort();
  },

  render: function(){
    console.log('Person: ');
    return (
	    <div>
	         Hello
	    </div>
    );
   }
});

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id='app'/>

【讨论】：

【解决方案4】：

尝试全局安装 axios，使用

$ npm install -g axios

【讨论】：

这样做但仍然是同样的错误。关于包安装还有什么需要我了解的吗？
你能发布你的 package.json 吗？如果您在 dev-dependencies 中有定义，Axion 应该是依赖项块的一部分，而不是 dev-dependencies。