反編碼不能用webpack編譯

Question

我的代碼不會因某種原因編譯。奇怪的是，當我使用瀏覽器解釋器時，這是行得通的。

<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>            

我想我必須做一些愚蠢像失去了一些東西因爲它在奇怪的瀏覽器中運行。這是否會掩蓋一些錯誤，因爲它被解釋爲與之前編譯運行時相反的結果？

Answer 1

根據意見，您可能會缺少導入fetch。取指是not readily available in all browsers。

npm包whatwg-fetch特別提到如何讓fetch在支持webpack的環境中工作。

Installation

npm install whatwg-fetch --save

or

bower install fetch .

You will also need a Promise polyfill for older browsers. We recommend taylorhakes/promise-polyfill for its small size and Promises/A+ compatibility.

For use with webpack, add this package in the entry configuration option before your application entry point:

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

For Babel and ES2015+, make sure to import the file (in your react-components):

import 'whatwg-fetch'

另外，在看你的代碼，這是從偏離常規的JavaScript風格指南一點點的間距方面，我會考慮讓eslint起來，在你的環境中運行更好的反饋這樣的錯誤。如果您已啓用eslint，只要您嘗試類似此類操作，就會先獲得fetch is undefined，而不先導入fetch。

從我的另一個個人筆記，嘗試只是在篡改您的webpack配置之前在您的文件中輸入whatwg-fetch。您可能不需要將其添加爲條目。

祝你好運！