反应代码不能用 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

根据 cmets，您可能缺少 fetch 导入。 Fetch 是not readily available in all browsers。

npm 包 whatwg-fetch 专门提到了如何让 fetch 在支持 webpack 的环境中工作。

安装

npm install whatwg-fetch --save

或

bower install fetch.

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

为了配合webpack使用，在入口配置中添加这个包 应用程序入口点之前的选项：

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

对于 Babel 和 ES2015+，请确保 导入文件（在你的反应组件中）：

import 'whatwg-fetch'

此外，查看您的代码，它在间距方面与常规 javascript 样式指南略有不同，我会考虑在您的环境中启动并运行 eslint，以便更好地反馈此类错误。如果你启用了 eslint，只要你尝试这样的操作，你就会得到fetch is undefined，而无需先导入fetch。

我的另一个个人说明，尝试在你的文件中导入whatwg-fetch，然后再篡改你的 webpack 配置。您可能不需要将其添加为条目。

祝你好运！