使用 webpack 发布运行 react-redux

Question

嗨，我正在学习 this tutorial and I have setup my webpack configuration based on this 教程。

不管我有以下文件index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import AppComp from './components/App' 

let store = createStore(todoApp)

let App = React.createClass({
  render: () => {
    return (
      <Provider store={store}>
        <AppComp />
      </Provider>
    )
  }
});

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

而我的 webpack 配置是

var HtmlWebpackPlugin = require ('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    entry: [
        './app/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'index_build.js'
    },

    module: {
        loaders: [
            { 
                test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', presets: ['es2015', 'react']  
            },
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
};

当我运行使用 webpack 的应用程序时，出现以下错误

ERROR in ./app/index.js
Module build failed: SyntaxError: Unexpected token (13:6)

  11 |   render: () => {
  12 |     return (
> 13 |       <Provider store={store}>
     |       ^
  14 |         <App />
  15 |       </Provider>
  16 |     )

谁能帮我解决这个错误？

编辑： 问题是我定义 webpack 配置的方式，预设应该在查询块内。这是我更新的 webpack 配置文件

var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      { 
          test: /\.js$/, 
          exclude: /node_modules/, 
          loader: 'babel-loader',
          query: {
            presets: ['react', 'babel-preset-react']
          } 
      }
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

Answer 1

您需要使用 npm 模块 'path' 来定义路径。这是 webpack.config.js 文件

    var HtmlWebpackPlugin = require ('html-webpack-plugin');
    var path = require('path');
    var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
        template: __dirname + '/app/index.html',
        filename: 'index.html',
        inject: 'body'
    });

    module.exports = {
        entry: [
            './app/index.js'
        ],
        output: {
            path: path.resolve(__dirname, 'dist/'),
            filename: 'index_build.js'
        },

        module: {
            loaders: [
                { 
                    test: /\.js$/, include: path.join(__dirname,'/app'), loader: 'babel-loader', presets: ['es2015', 'react']  
                },
            ]
        },
        plugins: [HtmlWebpackPluginConfig]
   };

Answer 2

您必须指定 babel 预设。您可以使用 .babelrc

{
  "presets": [
  "react",
  "es2015"
 ]
}

或者您可以在加载程序查询中指定它：

loaders: [ 'babel?presets[]=react,presets[]=es2015' ]

使用 webpack 发布运行 react-redux

Issue running react-redux with webpack

reactjs

redux

react-redux

使用 webpack 发布 运行 react-redux

Issue running react-redux with webpack

reactjs

redux

react-redux

使用 webpack 发布运行 react-redux