反应代码不与webpack编译

我的代码不会编译出于某种原因。 奇怪的是,当我在浏览器解释器中使用时会起作用。

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://unpkg.com/react@15/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> 

反应代码:

 var Cookies = require('cookies'); var cookieParser = require('cookie-parser'); var name = document.getElementById('name').innerHTML; //var name = req.user.name; var start = false; var Assets = React.createClass({ getInitialState: function(){ return({ assets: [], secondsElapsed: 0 }); }, tick: function() { //this.setState({secondsElapsed: this.state.secondsElapsed + 1}); if(start === true){ console.log(name); var myHeaders = new Headers(); var token = new Cookies(req,res).get('access_token'); myHeaders.append('acess_token', token); var myInit = { method: 'GET', headers: myHeaders}; fetch('/api/user/all/?name='+name, myInit).then(function(data){ return data.json(); }).then( json => { this.setState({ assets: json }); }); } }, componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); }, render: function(){ var assets = this.state.assets; assets = assets.map(function(asseti,index){ return( asseti.map(function(asset, index){ return( <li key={index}> <span className={asset.active}></span> <span>{asset.name}</span> <span >{asset.description}</span> <span>{asset.location.coordinates[0]}{asset.location.coordinates[1]}</span> </li> ) }) ) }); return( <div> <form onSubmit={this.handleSubmit}> <input type="submit" value="Find assets" /> </form> {assets} </div> ); }, handleSubmit: function(e){ e.preventDefault(); start = true; // name = this.refs.name.value; fetch('/api/user/all/?name='+name).then(function(data){ return data.json(); }).then( json => { this.setState({ assets: json }); }); } }); ReactDOM.render(<Assets />, document.getElementById('assets')); 

Webpack.config.js:

 var path = require('path'); module.exports = { entry: path.resolve(__dirname, 'puplic') + '\\js\\baseReact.js', output: { path: path.resolve(__dirname, 'dist') + '/app', filename: 'bundle.js', publicPath: '/app/' }, module: { loaders: [ { test: /\.js$/, include: path.resolve(__dirname, 'public/js'), loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-0'] } }, { test: /\.css$/, loader: 'style-loader!css-loader' } ] }, devServer: { historyApiFallback: true }}; 

错误:

 ERROR in ./puplic/js/baseReact.js Module parse failed: C:\Users\test\Documents\GPSTracker\puplic\js\baseReact.js Unexpected token ( 53:14) You may need an appropriate loader to handle this file type. | asseti.map(function(asset, index){ | return( | <li key={index}> | <span className={asset.active}></span> | <span>{asset.name}</span> 

我想我必须做一些愚蠢的事情,因为它在浏览器中运行是很奇怪的。 这是否掩盖了一些错误,因为它被解释为相对于之前编译运行?

根据评论,您可能会错过fetch导入。 所有浏览器中都不提供提取。

npm软件包whatwg-fetch特别提到如何在启用webpack的环境中fetch工作。

安装

npm install whatwg-fetch --save

要么

bower install fetch

对于旧版本的浏览器,您还需要一个Promise的polyfill。 我们推荐taylorhakes / promise-polyfill的小尺寸和Promises / A +兼容性。

为了与webpack一起使用,请在应用程序入口点之前的条目configuration选项中添加此包:

entry: ['whatwg-fetch', ...]

对于Babel和ES2015 +,请确保导入文件(在您的react-components中):

import 'whatwg-fetch'

另外,看看你的代码,这是偏离正常的JavaScript风格指南在间距方面的一点点,我会考虑在你的环境中运行,以获得更好的反馈这样的错误。 如果你已经启用了eslint,只要你尝试类似这样的事情,没有先导入fetch ,你会得到fetch is undefined fetch

从我的另一个个人笔记,尝试只是在篡改您的webpackconfiguration之前,在您的文件中导入whatwg-fetch 。 您可能不需要将其添加为条目。

祝你好运!