尝试将redux集成到react应用中。Webpack被store.js噎住了

Question

我正在尝试将redux集成到现有的react应用程序中。我所有的react代码都在jsx文件中。现在，我将介绍redux和store.js。在编译过程中，store.js上一个预期的令牌错误上的webpack错误

网络包.配置. js

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'project/static/public/js');
var APP_DIR = path.resolve(__dirname, 'project/static/public/js/components');


module.exports = {
  entry: APP_DIR + '/App.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  resolve: {
    alias: {
      'react': path.join(__dirname, 'node_modules', 'react')
    }
  },
  module : {
    loaders : [
      {
        test : /\.jsx/,
        include : APP_DIR,
        loader : 'babel',
        presets : ['es2015']
      },
      {
        test : /\.js/,
        include : BUILD_DIR,
        exclude : /bundle.js||bundle.js.map||node_modules/,
        loader : 'babel',
        presets : ['es2015']
      }
    ]
  },
  watchOptions: {
    poll: true
  }

};

.babelrc

{
  "presets": [
    "es2015",
    "react"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    }
  },
  "plugins": [
      ["transform-es2015-arrow-functions", { "spec": true }],
      ["transform-class-properties"]
    ]
}

商店. js

import { applyMiddleware, createStore} from 'redux';
import combineReducers from './reducers/index.js'


export default createStore(combineReducers)

出错信息

./project/static/public/js/store中的错误.js模块解析失败：/home/username/git/project/project/static/public/js/store.js第 1 行：

意外令牌您可能需要一个适当的加载程序来处理此文件类型。|从'redux'导入{ApplyMiddleware， createStore}；|从'./减速机/index.js导入组合减速机' | @ ./项目/静态/公共/js/组件/应用程序.jsx 15:13-32

这些文件在尝试解析和更好地理解 redux 时经历了多次迭代。我认为问题出在我的网络包配置上。

Answer 1

您使用的是哪个版本的Babel？我猜您需要在webpack规则中使用babel-loader。此配置适用于Babel 7和Webpack 4。

网络包规则：

      {
        test: /\.js$/,
        include : BUILD_DIR,
        exclude : /bundle.js||bundle.js.map||node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },